import React, { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import QuickFunctions from '../components/QuickFunctions'

export default function Home() {
  const navigate = useNavigate()


  // 详细的车辆数据
  const allCars = [
    // 新能源车型
    { id: 1, name: '比亚迪汉', brand: '比亚迪', series: '汉', type: '新能源', price: 25, country: '国产', category: '轿车', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 2, name: '特斯拉Model 3', brand: '特斯拉', series: 'Model 3', type: '新能源', price: 30, country: '美系', category: '轿车', image: 'https://images.unsplash.com/photo-1560958089-b8a1929cea89?w=300&h=200&fit=crop' },
    { id: 3, name: '蔚来ET7', brand: '蔚来', series: 'ET7', type: '新能源', price: 45, country: '国产', category: '轿车', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 4, name: '小鹏P7', brand: '小鹏', series: 'P7', type: '新能源', price: 28, country: '国产', category: '轿车', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 5, name: '理想L9', brand: '理想', series: 'L9', type: '新能源', price: 50, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 6, name: '问界M7', brand: '问界', series: 'M7', type: '新能源', price: 35, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 7, name: '极氪001', brand: '极氪', series: '001', type: '新能源', price: 32, country: '国产', category: '轿车', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 8, name: '智己L7', brand: '智己', series: 'L7', type: '新能源', price: 38, country: '国产', category: '轿车', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 9, name: '阿维塔11', brand: '阿维塔', series: '11', type: '新能源', price: 42, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 10, name: '岚图FREE', brand: '岚图', series: 'FREE', type: '新能源', price: 36, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 11, name: '高合HiPhi X', brand: '高合', series: 'HiPhi X', type: '新能源', price: 55, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 12, name: '威马W6', brand: '威马', series: 'W6', type: '新能源', price: 26, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 13, name: '零跑C11', brand: '零跑', series: 'C11', type: '新能源', price: 24, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 14, name: '哪吒U', brand: '哪吒', series: 'U', type: '新能源', price: 22, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 15, name: '欧拉好猫', brand: '欧拉', series: '好猫', type: '新能源', price: 18, country: '国产', category: '轿车', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },

    // 新车 - 日系
    { id: 16, name: '丰田凯美瑞', brand: '丰田', series: '凯美瑞', type: '新车', price: 20, country: '日系', category: '轿车', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 17, name: '本田雅阁', brand: '本田', series: '雅阁', type: '新车', price: 18, country: '日系', category: '轿车', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 18, name: '日产天籁', brand: '日产', series: '天籁', type: '新车', price: 19, country: '日系', category: '轿车', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 19, name: '马自达阿特兹', brand: '马自达', series: '阿特兹', type: '新车', price: 17, country: '日系', category: '轿车', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 20, name: '丰田RAV4', brand: '丰田', series: 'RAV4', type: '新车', price: 22, country: '日系', category: 'SUV', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 21, name: '本田CR-V', brand: '本田', series: 'CR-V', type: '新车', price: 21, country: '日系', category: 'SUV', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 22, name: '日产奇骏', brand: '日产', series: '奇骏', type: '新车', price: 20, country: '日系', category: 'SUV', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 23, name: '丰田汉兰达', brand: '丰田', series: '汉兰达', type: '新车', price: 28, country: '日系', category: 'SUV', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 24, name: '本田奥德赛', brand: '本田', series: '奥德赛', type: '新车', price: 25, country: '日系', category: 'MPV', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 25, name: '日产楼兰', brand: '日产', series: '楼兰', type: '新车', price: 26, country: '日系', category: 'SUV', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 26, name: '丰田普拉多', brand: '丰田', series: '普拉多', type: '新车', price: 45, country: '日系', category: 'SUV', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 27, name: '本田冠道', brand: '本田', series: '冠道', type: '新车', price: 24, country: '日系', category: 'SUV', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 28, name: '马自达CX-5', brand: '马自达', series: 'CX-5', type: '新车', price: 19, country: '日系', category: 'SUV', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 29, name: '斯巴鲁森林人', brand: '斯巴鲁', series: '森林人', type: '新车', price: 23, country: '日系', category: 'SUV', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 30, name: '三菱欧蓝德', brand: '三菱', series: '欧蓝德', type: '新车', price: 18, country: '日系', category: 'SUV', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },

    // 新车 - 德系
    { id: 31, name: '奔驰C级', brand: '奔驰', series: 'C级', type: '新车', price: 35, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 32, name: '宝马3系', brand: '宝马', series: '3系', type: '新车', price: 32, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 33, name: '奥迪A4L', brand: '奥迪', series: 'A4L', type: '新车', price: 30, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 34, name: '大众帕萨特', brand: '大众', series: '帕萨特', type: '新车', price: 18, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 35, name: '奔驰GLC', brand: '奔驰', series: 'GLC', type: '新车', price: 40, country: '德系', category: 'SUV', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 36, name: '宝马X3', brand: '宝马', series: 'X3', type: '新车', price: 38, country: '德系', category: 'SUV', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 37, name: '奥迪Q5L', brand: '奥迪', series: 'Q5L', type: '新车', price: 36, country: '德系', category: 'SUV', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 38, name: '奔驰E级', brand: '奔驰', series: 'E级', type: '新车', price: 45, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 39, name: '宝马5系', brand: '宝马', series: '5系', type: '新车', price: 42, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 40, name: '奥迪A6L', brand: '奥迪', series: 'A6L', type: '新车', price: 40, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 41, name: '大众迈腾', brand: '大众', series: '迈腾', type: '新车', price: 20, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 42, name: '大众途观L', brand: '大众', series: '途观L', type: '新车', price: 22, country: '德系', category: 'SUV', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 43, name: '奔驰S级', brand: '奔驰', series: 'S级', type: '新车', price: 120, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 44, name: '宝马7系', brand: '宝马', series: '7系', type: '新车', price: 110, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 45, name: '奥迪A8L', brand: '奥迪', series: 'A8L', type: '新车', price: 100, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },

    // 新车 - 国产
    { id: 46, name: '吉利博越', brand: '吉利', series: '博越', type: '新车', price: 12, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 47, name: '长安CS75', brand: '长安', series: 'CS75', type: '新车', price: 11, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 48, name: '哈弗H6', brand: '哈弗', series: 'H6', type: '新车', price: 10, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 49, name: '传祺GS4', brand: '传祺', series: 'GS4', type: '新车', price: 13, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 50, name: '红旗H5', brand: '红旗', series: 'H5', type: '新车', price: 16, country: '国产', category: '轿车', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 51, name: '荣威RX5', brand: '荣威', series: 'RX5', type: '新车', price: 14, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 52, name: '奇瑞瑞虎8', brand: '奇瑞', series: '瑞虎8', type: '新车', price: 12, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 53, name: '比亚迪唐', brand: '比亚迪', series: '唐', type: '新车', price: 18, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 54, name: '长城炮', brand: '长城', series: '炮', type: '新车', price: 15, country: '国产', category: '皮卡', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 55, name: '五菱宏光', brand: '五菱', series: '宏光', type: '新车', price: 6, country: '国产', category: 'MPV', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 56, name: '宝骏730', brand: '宝骏', series: '730', type: '新车', price: 8, country: '国产', category: 'MPV', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 57, name: '江淮瑞风', brand: '江淮', series: '瑞风', type: '新车', price: 9, country: '国产', category: 'MPV', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 58, name: '东风风行', brand: '东风', series: '风行', type: '新车', price: 7, country: '国产', category: 'MPV', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 59, name: '北汽绅宝', brand: '北汽', series: '绅宝', type: '新车', price: 11, country: '国产', category: '轿车', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 60, name: '华晨中华', brand: '中华', series: 'V7', type: '新车', price: 13, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },

    // 新车 - 美系
    { id: 61, name: '福特蒙迪欧', brand: '福特', series: '蒙迪欧', type: '新车', price: 16, country: '美系', category: '轿车', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 62, name: '雪佛兰迈锐宝', brand: '雪佛兰', series: '迈锐宝', type: '新车', price: 15, country: '美系', category: '轿车', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 63, name: '别克君威', brand: '别克', series: '君威', type: '新车', price: 17, country: '美系', category: '轿车', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 64, name: '福特锐界', brand: '福特', series: '锐界', type: '新车', price: 24, country: '美系', category: 'SUV', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 65, name: '雪佛兰探界者', brand: '雪佛兰', series: '探界者', type: '新车', price: 22, country: '美系', category: 'SUV', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 66, name: '别克昂科威', brand: '别克', series: '昂科威', type: '新车', price: 23, country: '美系', category: 'SUV', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 67, name: '凯迪拉克CT5', brand: '凯迪拉克', series: 'CT5', type: '新车', price: 28, country: '美系', category: '轿车', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 68, name: '林肯冒险家', brand: '林肯', series: '冒险家', type: '新车', price: 26, country: '美系', category: 'SUV', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 69, name: 'Jeep自由光', brand: 'Jeep', series: '自由光', type: '新车', price: 20, country: '美系', category: 'SUV', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 70, name: '道奇酷威', brand: '道奇', series: '酷威', type: '新车', price: 18, country: '美系', category: 'SUV', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },

    // 新车 - 韩系
    { id: 71, name: '现代索纳塔', brand: '现代', series: '索纳塔', type: '新车', price: 16, country: '韩系', category: '轿车', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 72, name: '起亚K5', brand: '起亚', series: 'K5', type: '新车', price: 15, country: '韩系', category: '轿车', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 73, name: '现代途胜', brand: '现代', series: '途胜', type: '新车', price: 18, country: '韩系', category: 'SUV', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 74, name: '起亚智跑', brand: '起亚', series: '智跑', type: '新车', price: 17, country: '韩系', category: 'SUV', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 75, name: '现代胜达', brand: '现代', series: '胜达', type: '新车', price: 22, country: '韩系', category: 'SUV', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 76, name: '起亚KX5', brand: '起亚', series: 'KX5', type: '新车', price: 19, country: '韩系', category: 'SUV', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 77, name: '现代领动', brand: '现代', series: '领动', type: '新车', price: 12, country: '韩系', category: '轿车', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 78, name: '起亚K3', brand: '起亚', series: 'K3', type: '新车', price: 11, country: '韩系', category: '轿车', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 79, name: '现代ix35', brand: '现代', series: 'ix35', type: '新车', price: 14, country: '韩系', category: 'SUV', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 80, name: '起亚KX3', brand: '起亚', series: 'KX3', type: '新车', price: 13, country: '韩系', category: 'SUV', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },

    // 新车 - 法系
    { id: 81, name: '标致508', brand: '标致', series: '508', type: '新车', price: 16, country: '法系', category: '轿车', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 82, name: '雪铁龙C5', brand: '雪铁龙', series: 'C5', type: '新车', price: 15, country: '法系', category: '轿车', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 83, name: '标致4008', brand: '标致', series: '4008', type: '新车', price: 18, country: '法系', category: 'SUV', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 84, name: '雪铁龙C3-XR', brand: '雪铁龙', series: 'C3-XR', type: '新车', price: 14, country: '法系', category: 'SUV', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 85, name: '雷诺科雷傲', brand: '雷诺', series: '科雷傲', type: '新车', price: 17, country: '法系', category: 'SUV', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 86, name: 'DS 7', brand: 'DS', series: '7', type: '新车', price: 25, country: '法系', category: 'SUV', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 87, name: '标致3008', brand: '标致', series: '3008', type: '新车', price: 16, country: '法系', category: 'SUV', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 88, name: '雪铁龙C4L', brand: '雪铁龙', series: 'C4L', type: '新车', price: 13, country: '法系', category: '轿车', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 89, name: '雷诺卡缤', brand: '雷诺', series: '卡缤', type: '新车', price: 12, country: '法系', category: 'SUV', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 90, name: 'DS 5LS', brand: 'DS', series: '5LS', type: '新车', price: 20, country: '法系', category: '轿车', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },

    // 二手车
    { id: 91, name: '奔驰E级', brand: '奔驰', series: 'E级', type: '二手车', price: 25, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 92, name: '宝马5系', brand: '宝马', series: '5系', type: '二手车', price: 28, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 93, name: '奥迪A6L', brand: '奥迪', series: 'A6L', type: '二手车', price: 26, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 94, name: '丰田汉兰达', brand: '丰田', series: '汉兰达', type: '二手车', price: 22, country: '日系', category: 'SUV', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 95, name: '本田奥德赛', brand: '本田', series: '奥德赛', type: '二手车', price: 20, country: '日系', category: 'MPV', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 96, name: '大众途观', brand: '大众', series: '途观', type: '二手车', price: 15, country: '德系', category: 'SUV', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 97, name: '别克君越', brand: '别克', series: '君越', type: '二手车', price: 18, country: '美系', category: '轿车', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 98, name: '现代ix35', brand: '现代', series: 'ix35', type: '二手车', price: 12, country: '韩系', category: 'SUV', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 99, name: '福特翼虎', brand: '福特', series: '翼虎', type: '二手车', price: 14, country: '美系', category: 'SUV', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 100, name: '日产逍客', brand: '日产', series: '逍客', type: '二手车', price: 13, country: '日系', category: 'SUV', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },

    // 新增100款车型 - 豪华品牌
    { id: 101, name: '保时捷911', brand: '保时捷', series: '911', type: '新车', price: 150, country: '德系', category: '跑车', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 102, name: '保时捷Cayenne', brand: '保时捷', series: 'Cayenne', type: '新车', price: 120, country: '德系', category: 'SUV', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 103, name: '保时捷Macan', brand: '保时捷', series: 'Macan', type: '新车', price: 80, country: '德系', category: 'SUV', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 104, name: '法拉利F8', brand: '法拉利', series: 'F8', type: '新车', price: 300, country: '意系', category: '跑车', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 105, name: '兰博基尼Huracan', brand: '兰博基尼', series: 'Huracan', type: '新车', price: 350, country: '意系', category: '跑车', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 106, name: '玛莎拉蒂Ghibli', brand: '玛莎拉蒂', series: 'Ghibli', type: '新车', price: 90, country: '意系', category: '轿车', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 107, name: '玛莎拉蒂Levante', brand: '玛莎拉蒂', series: 'Levante', type: '新车', price: 100, country: '意系', category: 'SUV', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 108, name: '阿斯顿马丁DB11', brand: '阿斯顿马丁', series: 'DB11', type: '新车', price: 200, country: '英系', category: '跑车', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 109, name: '宾利欧陆GT', brand: '宾利', series: '欧陆GT', type: '新车', price: 250, country: '英系', category: '跑车', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 110, name: '劳斯莱斯幻影', brand: '劳斯莱斯', series: '幻影', type: '新车', price: 800, country: '英系', category: '轿车', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },

    // 新增 - 更多德系车型
    { id: 111, name: '奔驰A级', brand: '奔驰', series: 'A级', type: '新车', price: 25, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 112, name: '奔驰B级', brand: '奔驰', series: 'B级', type: '新车', price: 28, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 113, name: '奔驰CLA', brand: '奔驰', series: 'CLA', type: '新车', price: 30, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 114, name: '奔驰CLS', brand: '奔驰', series: 'CLS', type: '新车', price: 70, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 115, name: '奔驰GLA', brand: '奔驰', series: 'GLA', type: '新车', price: 28, country: '德系', category: 'SUV', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 116, name: '奔驰GLE', brand: '奔驰', series: 'GLE', type: '新车', price: 85, country: '德系', category: 'SUV', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 117, name: '奔驰GLS', brand: '奔驰', series: 'GLS', type: '新车', price: 120, country: '德系', category: 'SUV', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 118, name: '宝马1系', brand: '宝马', series: '1系', type: '新车', price: 22, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 119, name: '宝马2系', brand: '宝马', series: '2系', type: '新车', price: 25, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 120, name: '宝马4系', brand: '宝马', series: '4系', type: '新车', price: 35, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },

    // 新增 - 更多宝马车型
    { id: 121, name: '宝马6系', brand: '宝马', series: '6系', type: '新车', price: 80, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 122, name: '宝马X1', brand: '宝马', series: 'X1', type: '新车', price: 28, country: '德系', category: 'SUV', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 123, name: '宝马X4', brand: '宝马', series: 'X4', type: '新车', price: 45, country: '德系', category: 'SUV', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 124, name: '宝马X5', brand: '宝马', series: 'X5', type: '新车', price: 75, country: '德系', category: 'SUV', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 125, name: '宝马X6', brand: '宝马', series: 'X6', type: '新车', price: 85, country: '德系', category: 'SUV', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 126, name: '宝马X7', brand: '宝马', series: 'X7', type: '新车', price: 110, country: '德系', category: 'SUV', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 127, name: '奥迪A1', brand: '奥迪', series: 'A1', type: '新车', price: 18, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 128, name: '奥迪A3', brand: '奥迪', series: 'A3', type: '新车', price: 22, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 129, name: '奥迪A5', brand: '奥迪', series: 'A5', type: '新车', price: 35, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 130, name: '奥迪A7', brand: '奥迪', series: 'A7', type: '新车', price: 65, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },

    // 新增 - 更多奥迪车型
    { id: 131, name: '奥迪Q2', brand: '奥迪', series: 'Q2', type: '新车', price: 20, country: '德系', category: 'SUV', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 132, name: '奥迪Q3', brand: '奥迪', series: 'Q3', type: '新车', price: 25, country: '德系', category: 'SUV', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 133, name: '奥迪Q7', brand: '奥迪', series: 'Q7', type: '新车', price: 70, country: '德系', category: 'SUV', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 134, name: '奥迪Q8', brand: '奥迪', series: 'Q8', type: '新车', price: 85, country: '德系', category: 'SUV', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 135, name: '大众高尔夫', brand: '大众', series: '高尔夫', type: '新车', price: 15, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 136, name: '大众速腾', brand: '大众', series: '速腾', type: '新车', price: 14, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 137, name: '大众朗逸', brand: '大众', series: '朗逸', type: '新车', price: 12, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 138, name: '大众宝来', brand: '大众', series: '宝来', type: '新车', price: 11, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 139, name: '大众凌渡', brand: '大众', series: '凌渡', type: '新车', price: 13, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 140, name: '大众探歌', brand: '大众', series: '探歌', type: '新车', price: 16, country: '德系', category: 'SUV', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },

    // 新增 - 更多日系车型
    { id: 141, name: '丰田卡罗拉', brand: '丰田', series: '卡罗拉', type: '新车', price: 12, country: '日系', category: '轿车', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 142, name: '丰田雷凌', brand: '丰田', series: '雷凌', type: '新车', price: 11, country: '日系', category: '轿车', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 143, name: '丰田威驰', brand: '丰田', series: '威驰', type: '新车', price: 8, country: '日系', category: '轿车', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 144, name: '丰田致炫', brand: '丰田', series: '致炫', type: '新车', price: 7, country: '日系', category: '轿车', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 145, name: '丰田奕泽', brand: '丰田', series: '奕泽', type: '新车', price: 14, country: '日系', category: 'SUV', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 146, name: '丰田C-HR', brand: '丰田', series: 'C-HR', type: '新车', price: 15, country: '日系', category: 'SUV', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 147, name: '本田思域', brand: '本田', series: '思域', type: '新车', price: 13, country: '日系', category: '轿车', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 148, name: '本田凌派', brand: '本田', series: '凌派', type: '新车', price: 10, country: '日系', category: '轿车', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 149, name: '本田飞度', brand: '本田', series: '飞度', type: '新车', price: 8, country: '日系', category: '轿车', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 150, name: '本田缤智', brand: '本田', series: '缤智', type: '新车', price: 13, country: '日系', category: 'SUV', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },

    // 新增 - 更多日系车型
    { id: 151, name: '本田XR-V', brand: '本田', series: 'XR-V', type: '新车', price: 12, country: '日系', category: 'SUV', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 152, name: '本田UR-V', brand: '本田', series: 'UR-V', type: '新车', price: 26, country: '日系', category: 'SUV', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 153, name: '日产轩逸', brand: '日产', series: '轩逸', type: '新车', price: 11, country: '日系', category: '轿车', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 154, name: '日产骐达', brand: '日产', series: '骐达', type: '新车', price: 10, country: '日系', category: '轿车', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 155, name: '日产阳光', brand: '日产', series: '阳光', type: '新车', price: 8, country: '日系', category: '轿车', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 156, name: '日产劲客', brand: '日产', series: '劲客', type: '新车', price: 12, country: '日系', category: 'SUV', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 157, name: '日产楼兰', brand: '日产', series: '楼兰', type: '新车', price: 24, country: '日系', category: 'SUV', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 158, name: '马自达昂克赛拉', brand: '马自达', series: '昂克赛拉', type: '新车', price: 12, country: '日系', category: '轿车', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 159, name: '马自达CX-4', brand: '马自达', series: 'CX-4', type: '新车', price: 15, country: '日系', category: 'SUV', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 160, name: '马自达CX-8', brand: '马自达', series: 'CX-8', type: '新车', price: 26, country: '日系', category: 'SUV', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },

    // 新增 - 更多国产车型
    { id: 161, name: '吉利帝豪', brand: '吉利', series: '帝豪', type: '新车', price: 8, country: '国产', category: '轿车', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 162, name: '吉利缤越', brand: '吉利', series: '缤越', type: '新车', price: 9, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 163, name: '吉利星越', brand: '吉利', series: '星越', type: '新车', price: 14, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 164, name: '长安逸动', brand: '长安', series: '逸动', type: '新车', price: 8, country: '国产', category: '轿车', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 165, name: '长安CS35', brand: '长安', series: 'CS35', type: '新车', price: 7, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 166, name: '长安CS55', brand: '长安', series: 'CS55', type: '新车', price: 9, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 167, name: '长安CS85', brand: '长安', series: 'CS85', type: '新车', price: 12, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 168, name: '哈弗F5', brand: '哈弗', series: 'F5', type: '新车', price: 9, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 169, name: '哈弗F7', brand: '哈弗', series: 'F7', type: '新车', price: 11, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 170, name: '哈弗H9', brand: '哈弗', series: 'H9', type: '新车', price: 22, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },

    // 新增 - 更多国产车型
    { id: 171, name: '传祺GA4', brand: '传祺', series: 'GA4', type: '新车', price: 8, country: '国产', category: '轿车', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 172, name: '传祺GA6', brand: '传祺', series: 'GA6', type: '新车', price: 11, country: '国产', category: '轿车', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 173, name: '传祺GS3', brand: '传祺', series: 'GS3', type: '新车', price: 8, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 174, name: '传祺GS5', brand: '传祺', series: 'GS5', type: '新车', price: 12, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 175, name: '传祺GS8', brand: '传祺', series: 'GS8', type: '新车', price: 16, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 176, name: '红旗H7', brand: '红旗', series: 'H7', type: '新车', price: 25, country: '国产', category: '轿车', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 177, name: '红旗HS5', brand: '红旗', series: 'HS5', type: '新车', price: 18, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 178, name: '红旗HS7', brand: '红旗', series: 'HS7', type: '新车', price: 35, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 179, name: '荣威i5', brand: '荣威', series: 'i5', type: '新车', price: 7, country: '国产', category: '轿车', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 180, name: '荣威i6', brand: '荣威', series: 'i6', type: '新车', price: 9, country: '国产', category: '轿车', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },

    // 新增 - 更多美系车型
    { id: 181, name: '福特福克斯', brand: '福特', series: '福克斯', type: '新车', price: 11, country: '美系', category: '轿车', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 182, name: '福特福睿斯', brand: '福特', series: '福睿斯', type: '新车', price: 9, country: '美系', category: '轿车', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 183, name: '福特金牛座', brand: '福特', series: '金牛座', type: '新车', price: 23, country: '美系', category: '轿车', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 184, name: '福特翼搏', brand: '福特', series: '翼搏', type: '新车', price: 10, country: '美系', category: 'SUV', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 185, name: '福特撼路者', brand: '福特', series: '撼路者', type: '新车', price: 28, country: '美系', category: 'SUV', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 186, name: '雪佛兰科鲁兹', brand: '雪佛兰', series: '科鲁兹', type: '新车', price: 10, country: '美系', category: '轿车', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 187, name: '雪佛兰科沃兹', brand: '雪佛兰', series: '科沃兹', type: '新车', price: 8, country: '美系', category: '轿车', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 188, name: '雪佛兰创酷', brand: '雪佛兰', series: '创酷', type: '新车', price: 10, country: '美系', category: 'SUV', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 189, name: '别克英朗', brand: '别克', series: '英朗', type: '新车', price: 10, country: '美系', category: '轿车', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 190, name: '别克威朗', brand: '别克', series: '威朗', type: '新车', price: 13, country: '美系', category: '轿车', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },

    // 新增 - 更多韩系车型
    { id: 191, name: '现代瑞纳', brand: '现代', series: '瑞纳', type: '新车', price: 6, country: '韩系', category: '轿车', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 192, name: '现代悦动', brand: '现代', series: '悦动', type: '新车', price: 8, country: '韩系', category: '轿车', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 193, name: '现代朗动', brand: '现代', series: '朗动', type: '新车', price: 9, country: '韩系', category: '轿车', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 194, name: '现代名图', brand: '现代', series: '名图', type: '新车', price: 13, country: '韩系', category: '轿车', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 195, name: '现代胜达', brand: '现代', series: '胜达', type: '新车', price: 20, country: '韩系', category: 'SUV', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 196, name: '起亚K2', brand: '起亚', series: 'K2', type: '新车', price: 7, country: '韩系', category: '轿车', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 197, name: '起亚K4', brand: '起亚', series: 'K4', type: '新车', price: 12, country: '韩系', category: '轿车', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 198, name: '起亚智跑', brand: '起亚', series: '智跑', type: '新车', price: 15, country: '韩系', category: 'SUV', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 199, name: '起亚KX3', brand: '起亚', series: 'KX3', type: '新车', price: 11, country: '韩系', category: 'SUV', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 200, name: '起亚KX7', brand: '起亚', series: 'KX7', type: '新车', price: 18, country: '韩系', category: 'SUV', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },

    // 新增100款车型 - 豪华品牌
    { id: 101, name: '保时捷911', brand: '保时捷', series: '911', type: '新车', price: 150, country: '德系', category: '跑车', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 102, name: '保时捷Cayenne', brand: '保时捷', series: 'Cayenne', type: '新车', price: 120, country: '德系', category: 'SUV', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 103, name: '保时捷Macan', brand: '保时捷', series: 'Macan', type: '新车', price: 80, country: '德系', category: 'SUV', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 104, name: '法拉利F8', brand: '法拉利', series: 'F8', type: '新车', price: 300, country: '意系', category: '跑车', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 105, name: '兰博基尼Huracan', brand: '兰博基尼', series: 'Huracan', type: '新车', price: 350, country: '意系', category: '跑车', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 106, name: '玛莎拉蒂Ghibli', brand: '玛莎拉蒂', series: 'Ghibli', type: '新车', price: 90, country: '意系', category: '轿车', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 107, name: '玛莎拉蒂Levante', brand: '玛莎拉蒂', series: 'Levante', type: '新车', price: 100, country: '意系', category: 'SUV', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 108, name: '阿斯顿马丁DB11', brand: '阿斯顿马丁', series: 'DB11', type: '新车', price: 200, country: '英系', category: '跑车', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 109, name: '宾利欧陆GT', brand: '宾利', series: '欧陆GT', type: '新车', price: 250, country: '英系', category: '跑车', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 110, name: '劳斯莱斯幻影', brand: '劳斯莱斯', series: '幻影', type: '新车', price: 800, country: '英系', category: '轿车', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },

    // 新增 - 更多德系车型
    { id: 111, name: '奔驰A级', brand: '奔驰', series: 'A级', type: '新车', price: 25, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 112, name: '奔驰B级', brand: '奔驰', series: 'B级', type: '新车', price: 28, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 113, name: '奔驰CLA', brand: '奔驰', series: 'CLA', type: '新车', price: 30, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 114, name: '奔驰CLS', brand: '奔驰', series: 'CLS', type: '新车', price: 70, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 115, name: '奔驰GLA', brand: '奔驰', series: 'GLA', type: '新车', price: 28, country: '德系', category: 'SUV', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 116, name: '奔驰GLE', brand: '奔驰', series: 'GLE', type: '新车', price: 85, country: '德系', category: 'SUV', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 117, name: '奔驰GLS', brand: '奔驰', series: 'GLS', type: '新车', price: 120, country: '德系', category: 'SUV', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 118, name: '宝马1系', brand: '宝马', series: '1系', type: '新车', price: 22, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 119, name: '宝马2系', brand: '宝马', series: '2系', type: '新车', price: 25, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 120, name: '宝马4系', brand: '宝马', series: '4系', type: '新车', price: 35, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },

    // 新增 - 更多宝马车型
    { id: 121, name: '宝马6系', brand: '宝马', series: '6系', type: '新车', price: 80, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 122, name: '宝马X1', brand: '宝马', series: 'X1', type: '新车', price: 28, country: '德系', category: 'SUV', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 123, name: '宝马X4', brand: '宝马', series: 'X4', type: '新车', price: 45, country: '德系', category: 'SUV', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 124, name: '宝马X5', brand: '宝马', series: 'X5', type: '新车', price: 75, country: '德系', category: 'SUV', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 125, name: '宝马X6', brand: '宝马', series: 'X6', type: '新车', price: 85, country: '德系', category: 'SUV', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 126, name: '宝马X7', brand: '宝马', series: 'X7', type: '新车', price: 110, country: '德系', category: 'SUV', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 127, name: '奥迪A1', brand: '奥迪', series: 'A1', type: '新车', price: 18, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 128, name: '奥迪A3', brand: '奥迪', series: 'A3', type: '新车', price: 22, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 129, name: '奥迪A5', brand: '奥迪', series: 'A5', type: '新车', price: 35, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 130, name: '奥迪A7', brand: '奥迪', series: 'A7', type: '新车', price: 65, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },

    // 新增 - 更多奥迪车型
    { id: 131, name: '奥迪Q2', brand: '奥迪', series: 'Q2', type: '新车', price: 20, country: '德系', category: 'SUV', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 132, name: '奥迪Q3', brand: '奥迪', series: 'Q3', type: '新车', price: 25, country: '德系', category: 'SUV', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 133, name: '奥迪Q7', brand: '奥迪', series: 'Q7', type: '新车', price: 70, country: '德系', category: 'SUV', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 134, name: '奥迪Q8', brand: '奥迪', series: 'Q8', type: '新车', price: 85, country: '德系', category: 'SUV', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 135, name: '大众高尔夫', brand: '大众', series: '高尔夫', type: '新车', price: 15, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 136, name: '大众速腾', brand: '大众', series: '速腾', type: '新车', price: 14, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 137, name: '大众朗逸', brand: '大众', series: '朗逸', type: '新车', price: 12, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 138, name: '大众宝来', brand: '大众', series: '宝来', type: '新车', price: 11, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 139, name: '大众凌渡', brand: '大众', series: '凌渡', type: '新车', price: 13, country: '德系', category: '轿车', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 140, name: '大众探歌', brand: '大众', series: '探歌', type: '新车', price: 16, country: '德系', category: 'SUV', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },

    // 新增 - 更多日系车型
    { id: 141, name: '丰田卡罗拉', brand: '丰田', series: '卡罗拉', type: '新车', price: 12, country: '日系', category: '轿车', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 142, name: '丰田雷凌', brand: '丰田', series: '雷凌', type: '新车', price: 11, country: '日系', category: '轿车', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 143, name: '丰田威驰', brand: '丰田', series: '威驰', type: '新车', price: 8, country: '日系', category: '轿车', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 144, name: '丰田致炫', brand: '丰田', series: '致炫', type: '新车', price: 7, country: '日系', category: '轿车', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 145, name: '丰田奕泽', brand: '丰田', series: '奕泽', type: '新车', price: 14, country: '日系', category: 'SUV', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 146, name: '丰田C-HR', brand: '丰田', series: 'C-HR', type: '新车', price: 15, country: '日系', category: 'SUV', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 147, name: '本田思域', brand: '本田', series: '思域', type: '新车', price: 13, country: '日系', category: '轿车', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 148, name: '本田凌派', brand: '本田', series: '凌派', type: '新车', price: 10, country: '日系', category: '轿车', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 149, name: '本田飞度', brand: '本田', series: '飞度', type: '新车', price: 8, country: '日系', category: '轿车', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 150, name: '本田缤智', brand: '本田', series: '缤智', type: '新车', price: 13, country: '日系', category: 'SUV', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },

    // 新增 - 更多日系车型
    { id: 151, name: '本田XR-V', brand: '本田', series: 'XR-V', type: '新车', price: 12, country: '日系', category: 'SUV', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 152, name: '本田UR-V', brand: '本田', series: 'UR-V', type: '新车', price: 26, country: '日系', category: 'SUV', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 153, name: '日产轩逸', brand: '日产', series: '轩逸', type: '新车', price: 11, country: '日系', category: '轿车', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 154, name: '日产骐达', brand: '日产', series: '骐达', type: '新车', price: 10, country: '日系', category: '轿车', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 155, name: '日产阳光', brand: '日产', series: '阳光', type: '新车', price: 8, country: '日系', category: '轿车', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 156, name: '日产劲客', brand: '日产', series: '劲客', type: '新车', price: 12, country: '日系', category: 'SUV', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 157, name: '日产楼兰', brand: '日产', series: '楼兰', type: '新车', price: 24, country: '日系', category: 'SUV', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 158, name: '马自达昂克赛拉', brand: '马自达', series: '昂克赛拉', type: '新车', price: 12, country: '日系', category: '轿车', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 159, name: '马自达CX-4', brand: '马自达', series: 'CX-4', type: '新车', price: 15, country: '日系', category: 'SUV', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 160, name: '马自达CX-8', brand: '马自达', series: 'CX-8', type: '新车', price: 26, country: '日系', category: 'SUV', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },

    // 新增 - 更多国产车型
    { id: 161, name: '吉利帝豪', brand: '吉利', series: '帝豪', type: '新车', price: 8, country: '国产', category: '轿车', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 162, name: '吉利缤越', brand: '吉利', series: '缤越', type: '新车', price: 9, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 163, name: '吉利星越', brand: '吉利', series: '星越', type: '新车', price: 14, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 164, name: '长安逸动', brand: '长安', series: '逸动', type: '新车', price: 8, country: '国产', category: '轿车', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 165, name: '长安CS35', brand: '长安', series: 'CS35', type: '新车', price: 7, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 166, name: '长安CS55', brand: '长安', series: 'CS55', type: '新车', price: 9, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 167, name: '长安CS85', brand: '长安', series: 'CS85', type: '新车', price: 12, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 168, name: '哈弗F5', brand: '哈弗', series: 'F5', type: '新车', price: 9, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 169, name: '哈弗F7', brand: '哈弗', series: 'F7', type: '新车', price: 11, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 170, name: '哈弗H9', brand: '哈弗', series: 'H9', type: '新车', price: 22, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },

    // 新增 - 更多国产车型
    { id: 171, name: '传祺GA4', brand: '传祺', series: 'GA4', type: '新车', price: 8, country: '国产', category: '轿车', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 172, name: '传祺GA6', brand: '传祺', series: 'GA6', type: '新车', price: 11, country: '国产', category: '轿车', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 173, name: '传祺GS3', brand: '传祺', series: 'GS3', type: '新车', price: 8, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 174, name: '传祺GS5', brand: '传祺', series: 'GS5', type: '新车', price: 12, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 175, name: '传祺GS8', brand: '传祺', series: 'GS8', type: '新车', price: 16, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 176, name: '红旗H7', brand: '红旗', series: 'H7', type: '新车', price: 25, country: '国产', category: '轿车', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 177, name: '红旗HS5', brand: '红旗', series: 'HS5', type: '新车', price: 18, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 178, name: '红旗HS7', brand: '红旗', series: 'HS7', type: '新车', price: 35, country: '国产', category: 'SUV', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 179, name: '荣威i5', brand: '荣威', series: 'i5', type: '新车', price: 7, country: '国产', category: '轿车', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 180, name: '荣威i6', brand: '荣威', series: 'i6', type: '新车', price: 9, country: '国产', category: '轿车', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },

    // 新增 - 更多美系车型
    { id: 181, name: '福特福克斯', brand: '福特', series: '福克斯', type: '新车', price: 11, country: '美系', category: '轿车', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 182, name: '福特福睿斯', brand: '福特', series: '福睿斯', type: '新车', price: 9, country: '美系', category: '轿车', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 183, name: '福特金牛座', brand: '福特', series: '金牛座', type: '新车', price: 23, country: '美系', category: '轿车', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 184, name: '福特翼搏', brand: '福特', series: '翼搏', type: '新车', price: 10, country: '美系', category: 'SUV', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 185, name: '福特撼路者', brand: '福特', series: '撼路者', type: '新车', price: 28, country: '美系', category: 'SUV', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 186, name: '雪佛兰科鲁兹', brand: '雪佛兰', series: '科鲁兹', type: '新车', price: 10, country: '美系', category: '轿车', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 187, name: '雪佛兰科沃兹', brand: '雪佛兰', series: '科沃兹', type: '新车', price: 8, country: '美系', category: '轿车', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 188, name: '雪佛兰创酷', brand: '雪佛兰', series: '创酷', type: '新车', price: 10, country: '美系', category: 'SUV', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 189, name: '别克英朗', brand: '别克', series: '英朗', type: '新车', price: 10, country: '美系', category: '轿车', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 190, name: '别克威朗', brand: '别克', series: '威朗', type: '新车', price: 13, country: '美系', category: '轿车', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },

    // 新增 - 更多韩系车型
    { id: 191, name: '现代瑞纳', brand: '现代', series: '瑞纳', type: '新车', price: 6, country: '韩系', category: '轿车', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 192, name: '现代悦动', brand: '现代', series: '悦动', type: '新车', price: 8, country: '韩系', category: '轿车', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 193, name: '现代朗动', brand: '现代', series: '朗动', type: '新车', price: 9, country: '韩系', category: '轿车', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 194, name: '现代名图', brand: '现代', series: '名图', type: '新车', price: 13, country: '韩系', category: '轿车', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 195, name: '现代胜达', brand: '现代', series: '胜达', type: '新车', price: 20, country: '韩系', category: 'SUV', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' },
    { id: 196, name: '起亚K2', brand: '起亚', series: 'K2', type: '新车', price: 7, country: '韩系', category: '轿车', image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop' },
    { id: 197, name: '起亚K4', brand: '起亚', series: 'K4', type: '新车', price: 12, country: '韩系', category: '轿车', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop' },
    { id: 198, name: '起亚智跑', brand: '起亚', series: '智跑', type: '新车', price: 15, country: '韩系', category: 'SUV', image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop' },
    { id: 199, name: '起亚KX3', brand: '起亚', series: 'KX3', type: '新车', price: 11, country: '韩系', category: 'SUV', image: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop' },
    { id: 200, name: '起亚KX7', brand: '起亚', series: 'KX7', type: '新车', price: 18, country: '韩系', category: 'SUV', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop' }
  ]

  // 筛选状态
  const [filterState, setFilterState] = useState({
    carType: '新车', // 新车/新能源/二手车
    priceRange: null, // 价格区间
    brand: null, // 品牌
    series: null, // 车系
    country: null, // 国别：日系/德系/国产
    category: null // 车型类别：轿车/SUV/MPV等
  })

  // 根据筛选条件过滤车辆
  const getFilteredCars = () => {
    return allCars.filter(car => {
      // 车型类型筛选
      if (filterState.carType && car.type !== filterState.carType) return false

      // 价格区间筛选
      if (filterState.priceRange) {
        const [min, max] = filterState.priceRange
        if (car.price < min || car.price > max) return false
      }

      // 品牌筛选
      if (filterState.brand && car.brand !== filterState.brand) return false

      // 车系筛选
      if (filterState.series && car.series !== filterState.series) return false

      // 国别筛选
      if (filterState.country && car.country !== filterState.country) return false

      // 车型类别筛选
      if (filterState.category && car.category !== filterState.category) return false

      return true
    })
  }

  // 获取价格区间范围
  const getPriceRange = (rangeText) => {
    const ranges = {
      '10万以下': [0, 10],
      '10-15万': [10, 15],
      '15-25万': [15, 25],
      '25-35万': [25, 35],
      '35-50万': [35, 50],
      '50万以上': [50, 999]
    }
    return ranges[rangeText] || null
  }

  // 处理筛选条件变化
  const handleFilterChange = (filterType, value) => {
    setFilterState(prev => ({
      ...prev,
      [filterType]: value
    }))
  }

  // 清除所有筛选条件
  const clearAllFilters = () => {
    setFilterState({
      carType: '新车',
      priceRange: null,
      brand: null,
      series: null,
      country: null,
      category: null
    })
  }

  // 获取筛选后的车辆数据
  const filteredCars = getFilteredCars()

  // 汽车图片映射函数
  const getCarImage = (carName) => {
    const carImages = {
      // 热门车型图片
      '奔驰C级': 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop',
      '宝马3系': 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop',
      '奥迪A4L': 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop',
      '大众帕萨特': 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop',
      '丰田凯美瑞': 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop',
      '本田雅阁': 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop',
      '日产天籁': 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop',
      '别克君威': 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop',
      '雪佛兰迈锐宝': 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop',
      '福特蒙迪欧': 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop',
      '现代索纳塔': 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop',
      '起亚K5': 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop',
      '马自达阿特兹': 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop',
      '标致508': 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop',
      '雪铁龙C5': 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop',

      // 近期重磅新车图片
      '特斯拉Model 3': 'https://images.unsplash.com/photo-1560958089-b8a1929cea89?w=300&h=200&fit=crop',
      '比亚迪汉': 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop',
      '蔚来ET7': 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop',
      '小鹏P7': 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop',
      '理想L9': 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop',
      '问界M7': 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop',
      '极氪001': 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop',
      '智己L7': 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop',
      '阿维塔11': 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop',
      '岚图FREE': 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop',
      '高合HiPhi X': 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop',
      '威马W6': 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop',
      '零跑C11': 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop',
      '哪吒U': 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop',
      '欧拉好猫': 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop',

      // 日系车型
      '丰田RAV4': 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop',
      '本田CR-V': 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop',
      '日产奇骏': 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop',
      '丰田汉兰达': 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop',
      '本田奥德赛': 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop',
      '日产楼兰': 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop',
      '丰田普拉多': 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop',
      '本田冠道': 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop',
      '马自达CX-5': 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop',
      '斯巴鲁森林人': 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop',
      '三菱欧蓝德': 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop',

      // 德系车型
      '奔驰GLC': 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop',
      '宝马X3': 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop',
      '奥迪Q5L': 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop',
      '奔驰E级': 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop',
      '宝马5系': 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop',
      '奥迪A6L': 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop',
      '大众迈腾': 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop',
      '大众途观L': 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop',
      '奔驰S级': 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop',
      '宝马7系': 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop',
      '奥迪A8L': 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop',

      // 国产车型
      '吉利博越': 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop',
      '长安CS75': 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop',
      '哈弗H6': 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop',
      '传祺GS4': 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop',
      '红旗H5': 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop',
      '荣威RX5': 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop',
      '奇瑞瑞虎8': 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop',
      '比亚迪唐': 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop',
      '长城炮': 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop',
      '五菱宏光': 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop',
      '宝骏730': 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop',
      '江淮瑞风': 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop',
      '东风风行': 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop',
      '北汽绅宝': 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop',
      '华晨中华': 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop',

      // 美系车型
      '福特锐界': 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop',
      '雪佛兰探界者': 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop',
      '别克昂科威': 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop',
      '凯迪拉克CT5': 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop',
      '林肯冒险家': 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop',
      'Jeep自由光': 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop',
      '道奇酷威': 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop',

      // 韩系车型
      '现代途胜': 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop',
      '起亚智跑': 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop',
      '现代胜达': 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop',
      '起亚KX5': 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop',
      '现代领动': 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop',
      '起亚K3': 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop',
      '现代ix35': 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop',
      '起亚KX3': 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop',

      // 法系车型
      '标致4008': 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop',
      '雪铁龙C3-XR': 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop',
      '雷诺科雷傲': 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop',
      'DS 7': 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop',
      '标致3008': 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop',
      '雪铁龙C4L': 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop',
      '雷诺卡缤': 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop',
      'DS 5LS': 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop',

      // 二手车
      '大众途观': 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop',
      '别克君越': 'https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop',
      '福特翼虎': 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop',
      '日产逍客': 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop'
    }

    // 如果找到匹配的图片，返回对应URL，否则返回默认图片
    return carImages[carName] || 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop'
  }

  const [activeTab, setActiveTab] = useState('首页')
  const [selectedCity, setSelectedCity] = useState('保定')
  const [selectedCarType, setSelectedCarType] = useState('新车')
  const [selectedPriceRange, setSelectedPriceRange] = useState('热门')
  const [showCitySelector, setShowCitySelector] = useState(false)
  const [activeLetter, setActiveLetter] = useState('A')
  const [showBrandSelector, setShowBrandSelector] = useState(false)
  const [activeBrandLetter, setActiveBrandLetter] = useState('A')
  const [selectedBrand, setSelectedBrand] = useState('')
  const [selectedSeries, setSelectedSeries] = useState('')

  // 搜索相关状态
  const [searchQuery, setSearchQuery] = useState('')
  const [searchHistory, setSearchHistory] = useState([])
  const [showSearchHistory, setShowSearchHistory] = useState(false)
  const [searchResults, setSearchResults] = useState([])
  const [isSearching, setIsSearching] = useState(false)

  // 返回顶部相关状态
  const [showBackToTop, setShowBackToTop] = useState(false)

  // 选车悬停效果相关状态
  const [showCarSelectionHover, setShowCarSelectionHover] = useState(false)

  // 从localStorage加载搜索历史
  useEffect(() => {
    const savedHistory = localStorage.getItem('searchHistory')
    if (savedHistory) {
      try {
        setSearchHistory(JSON.parse(savedHistory))
      } catch (error) {
        console.error('加载搜索历史失败:', error)
      }
    }
  }, [])

  // 点击外部区域关闭搜索历史
  useEffect(() => {
    const handleClickOutside = (event) => {
      const searchContainer = document.querySelector('.search-container')
      if (searchContainer && !searchContainer.contains(event.target)) {
        setShowSearchHistory(false)
      }
    }

    document.addEventListener('mousedown', handleClickOutside)
    return () => {
      document.removeEventListener('mousedown', handleClickOutside)
    }
  }, [])

  // 滚动监听
  useEffect(() => {
    const handleScroll = () => {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop
      setShowBackToTop(scrollTop > 300)
    }

    window.addEventListener('scroll', handleScroll)
    return () => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, [])

  // 保存搜索历史到localStorage
  const saveSearchHistory = (history) => {
    try {
      localStorage.setItem('searchHistory', JSON.stringify(history))
    } catch (error) {
      console.error('保存搜索历史失败:', error)
    }
  }

  // 添加搜索记录
  const addToSearchHistory = (query) => {
    if (!query.trim()) return

    const newHistory = [query, ...searchHistory.filter(item => item !== query)].slice(0, 10)
    setSearchHistory(newHistory)
    saveSearchHistory(newHistory)
  }

  // 清除搜索历史
  const clearSearchHistory = () => {
    setSearchHistory([])
    localStorage.removeItem('searchHistory')
  }

  // 删除单个搜索记录
  const removeSearchHistoryItem = (index) => {
    const newHistory = searchHistory.filter((_, i) => i !== index)
    setSearchHistory(newHistory)
    saveSearchHistory(newHistory)
  }

  // 执行搜索
  const performSearch = (query) => {
    if (!query.trim()) return

    setIsSearching(true)
    addToSearchHistory(query)
    setShowSearchHistory(false)

    // 模拟搜索过程
    setTimeout(() => {
      // 从品牌数据中搜索匹配的结果
      const allBrands = Object.values(brandData).flat()
      const matchingBrands = allBrands.filter(brand =>
        brand.name.toLowerCase().includes(query.toLowerCase()) ||
        brand.english.toLowerCase().includes(query.toLowerCase())
      )

      const results = []

      // 添加匹配的品牌
      matchingBrands.forEach(brand => {
        results.push({
          type: 'brand',
          name: brand.name,
          english: brand.english,
          match: query
        })

        // 添加该品牌的车系
        brand.series.forEach(series => {
          if (series.toLowerCase().includes(query.toLowerCase())) {
            results.push({
              type: 'series',
              name: series,
              brand: brand.name,
              match: query
            })
          }
        })
      })

      // 添加一些模拟的车型和资讯结果
      if (results.length < 5) {
        results.push(
          { type: 'model', name: `${query} 2024款`, price: '29.99万起', match: query },
          { type: 'news', title: `关于${query}的最新资讯`, match: query },
          { type: 'dealer', name: `${query}授权经销商`, location: selectedCity, match: query }
        )
      }

      setSearchResults(results.slice(0, 10))
      setIsSearching(false)
    }, 500)
  }

  // 处理搜索提交
  const handleSearchSubmit = (e) => {
    e.preventDefault()
    performSearch(searchQuery)
  }

  // 处理搜索历史点击
  const handleHistoryClick = (query) => {
    setSearchQuery(query)
    performSearch(query)
  }

  // 处理搜索结果点击
  const handleResultClick = (result) => {
    console.log('点击搜索结果:', result)
    // 这里可以根据结果类型进行不同的导航
    if (result.type === 'brand') {
      setSelectedBrand(result.name)
      setShowBrandSelector(true)
    } else if (result.type === 'series') {
      setSelectedBrand(result.brand)
      setSelectedSeries(result.name)
      navigate(`/car-details?brand=${encodeURIComponent(result.brand)}&series=${encodeURIComponent(result.name)}`)
    }
    setShowSearchHistory(false)
  }

  // 热门城市数据
  const hotCities = [
    '北京', '上海', '广州', '深圳', '重庆', '天津', '成都', '杭州',
    '武汉', '苏州', '西安', '南京', '长沙', '青岛', '郑州', '济南'
  ]

  // 按字母分类的城市数据
  const cityData = {
    'A': ['阿拉善', '鞍山', '安庆', '安阳', '阿坝', '安顺', '阿里', '安康', '阿克苏', '阿勒泰', '阿拉尔', '澳门'],
    'B': ['北京', '保定', '包头', '巴彦淖尔', '本溪', '白山', '白城', '蚌埠', '亳州', '滨州', '北海', '百色', '白沙', '保亭', '巴中', '毕节', '保山', '宝鸡', '白银', '博尔塔拉', '巴音郭楞', '北屯'],
    'C': ['重庆', '成都', '长沙', '长春', '常州', '沧州', '承德', '赤峰', '朝阳', '潮州', '郴州', '常德', '常熟', '慈溪', '从化', '潮阳', '澄海', '潮安', '潮南', '潮阳', '潮州', '澄海'],
    'D': ['大连', '东莞', '大庆', '东营', '德州', '丹东', '大同', '达州', '大理', '德宏', '迪庆', '定西', '定安', '东方', '儋州', '定州', '东阳', '丹阳', '大丰', '东台', '大冶', '当阳'],
    'E': ['鄂尔多斯', '恩施', '鄂州', '恩平', '恩阳', '恩施', '恩平', '恩阳', '恩施', '恩平', '恩阳', '恩施'],
    'F': ['佛山', '福州', '抚顺', '阜新', '阜阳', '抚州', '防城港', '佛山', '番禺', '福田', '福清', '福安', '福鼎', '福清', '福安', '福鼎', '福清', '福安', '福鼎', '福清', '福安', '福鼎'],
    'G': ['广州', '贵阳', '桂林', '赣州', '广元', '广安', '甘孜', '果洛', '固原', '广安', '广元', '广安', '广元', '广安', '广元', '广安', '广元', '广安', '广元', '广安', '广元', '广安'],
    'H': ['杭州', '合肥', '哈尔滨', '海口', '呼和浩特', '惠州', '湖州', '衡阳', '邯郸', '黄石', '黄冈', '黄山', '淮北', '淮南', '淮安', '菏泽', '鹤壁', '鹤岗', '黑河', '衡水', '河源', '河池'],
    'J': ['济南', '嘉兴', '金华', '江门', '九江', '济宁', '晋中', '晋城', '焦作', '济源', '揭阳', '江门', '江阴', '江都', '江津', '江油', '江安', '江华', '江永', '江口', '江川', '江达'],
    'K': ['昆明', '开封', '克拉玛依', '喀什', '库尔勒', '奎屯', '库车', '克州', '喀什', '库尔勒', '奎屯', '库车', '克州', '喀什', '库尔勒', '奎屯', '库车', '克州', '喀什', '库尔勒', '奎屯', '库车'],
    'L': ['兰州', '洛阳', '临沂', '廊坊', '连云港', '柳州', '泸州', '乐山', '六安', '聊城', '莱芜', '临汾', '吕梁', '临沧', '丽江', '六盘水', '凉山', '陇南', '临夏', '拉萨', '林芝', '临高'],
    'M': ['绵阳', '眉山', '茂名', '梅州', '茂名', '梅州', '茂名', '梅州', '茂名', '梅州', '茂名', '梅州', '茂名', '梅州', '茂名', '梅州', '茂名', '梅州', '茂名', '梅州', '茂名', '梅州'],
    'N': ['南京', '宁波', '南昌', '南宁', '南通', '南充', '内江', '宁德', '南平', '南阳', '南充', '内江', '宁德', '南平', '南阳', '南充', '内江', '宁德', '南平', '南阳', '南充', '内江'],
    'P': ['莆田', '萍乡', '盘锦', '濮阳', '平顶山', '濮阳', '平顶山', '濮阳', '平顶山', '濮阳', '平顶山', '濮阳', '平顶山', '濮阳', '平顶山', '濮阳', '平顶山', '濮阳', '平顶山', '濮阳', '平顶山', '濮阳'],
    'Q': ['青岛', '泉州', '齐齐哈尔', '秦皇岛', '曲靖', '衢州', '清远', '钦州', '庆阳', '黔南', '黔东南', '黔西南', '琼海', '琼中', '琼山', '琼海', '琼中', '琼山', '琼海', '琼中', '琼山', '琼海'],
    'R': ['日照', '日喀则', '日喀则', '日喀则', '日喀则', '日喀则', '日喀则', '日喀则', '日喀则', '日喀则', '日喀则', '日喀则', '日喀则', '日喀则', '日喀则', '日喀则', '日喀则', '日喀则', '日喀则', '日喀则', '日喀则', '日喀则'],
    'S': ['深圳', '苏州', '上海', '沈阳', '石家庄', '汕头', '韶关', '汕尾', '三明', '宿迁', '宿州', '商丘', '三门峡', '商洛', '十堰', '随州', '邵阳', '怀化', '湘西', '三亚', '三沙', '遂宁'],
    'T': ['天津', '太原', '唐山', '台州', '泰州', '泰安', '铜陵', '铜川', '天水', '通辽', '通化', '铁岭', '铁门关', '塔城', '图木舒克', '吐鲁番', '塔城', '铁门关', '塔城', '图木舒克', '吐鲁番', '塔城'],
    'W': ['武汉', '无锡', '温州', '乌鲁木齐', '威海', '潍坊', '渭南', '梧州', '文山', '武威', '吴忠', '乌海', '乌兰察布', '乌兰浩特', '乌苏', '五家渠', '万宁', '文昌', '五指山', '万州', '巫山', '巫溪'],
    'X': ['西安', '厦门', '徐州', '湘潭', '新乡', '许昌', '信阳', '咸宁', '孝感', '襄阳', '仙桃', '天门', '潜江', '西宁', '西双版纳', '西昌', '西宁', '西双版纳', '西昌', '西宁', '西双版纳', '西昌'],
    'Y': ['烟台', '银川', '宜昌', '岳阳', '运城', '阳泉', '榆林', '延安', '玉林', '玉溪', '宜宾', '雅安', '宜春', '鹰潭', '永州', '益阳', '岳阳', '云浮', '阳江', '阳春', '阳东', '阳西'],
    'Z': ['郑州', '珠海', '中山', '淄博', '枣庄', '张家口', '张家界', '肇庆', '湛江', '周口', '驻马店', '株洲', '张家港', '镇江', '舟山', '漳州', '遵义', '昭通', '中卫', '张掖', '中卫', '张掖']
  }

  // 字母列表
  const letters = Object.keys(cityData)

  // 导航菜单数据
  const navItems = [
    { id: '首页', icon: '🏠', path: '/' },
    { id: '选车', icon: '🚗', path: '/car-selection' },
    { id: '二手车', icon: '🔄', path: '/used-cars' },
    { id: '视频', icon: '📹', path: '/videos' },
    { id: '资讯', icon: '📰', path: '/zi' },
    { id: '车友圈', icon: '👥', path: '/community' },
    { id: '购车数据', icon: '📊', path: '/tubiao' },
    { id: '直播', icon: '📺', path: '/live' },
    { id: '工具', icon: '🔧', path: '/tools' },
    { id: '我的', icon: '👤', path: '/profile' },
    { id: '反馈', icon: '💬', path: '/feedback' }
  ]

  // 车型分类
  const carTypes = [
    { name: '新能源', icon: '⚡' },
    { name: '轿车', icon: '🚙' },
    { name: 'SUV', icon: '🚗' },
    { name: 'MPV', icon: '🚐' },
    { name: '跑车', icon: '🏎️' },
    { name: '皮卡', icon: '🛻' },
    { name: '微面', icon: '🚐' },
    { name: '微卡', icon: '🚛' },
    { name: '轻客', icon: '🚌' }
  ]

  // 价格区间
  const priceRanges = [
    '10万以下', '10-15万', '15-25万', '25-35万', '35-50万', '50万以上'
  ]

  // 车系分类
  const carOrigins = [
    '热门', '国产', '德系', '日系', '二手车'
  ]

  // 品牌数据 - 按字母分类
  const brandData = {
    'A': [
      { name: '奥迪', english: 'Audi', series: ['A3', 'A4L', 'A6L', 'Q3', 'Q5L', 'Q7'] },
      { name: '埃安', english: 'Aion', series: ['S Plus', 'LX Plus', 'V Plus'] },
      { name: 'AITO', english: 'AITO', series: ['问界M5', '问界M7', '问界M9'] },
      { name: '阿维塔', english: 'Avatr', series: ['阿维塔11', '阿维塔12'] },
      { name: '阿斯顿·马丁', english: 'Aston Martin', series: ['DB11', 'DBX', 'Vantage'] },
      { name: '阿尔法·罗密欧', english: 'Alfa Romeo', series: ['Giulia', 'Stelvio', 'Tonale'] },
      { name: '爱驰', english: 'Aiways', series: ['U5', 'U6'] },
      { name: '安凯客车', english: 'Ankai', series: ['安凯客车'] }
    ],
    'B': [
      { name: '奔驰', english: 'Mercedes-Benz', series: ['A级', 'C级', 'E级', 'S级', 'GLA', 'GLC', 'GLE', 'GLS'] },
      { name: '宝马', english: 'BMW', series: ['1系', '3系', '5系', '7系', 'X1', 'X3', 'X5', 'X7'] },
      { name: '比亚迪', english: 'BYD', series: ['秦', '汉', '唐', '宋', '元', '海豚', '海豹'] },
      { name: '别克', english: 'Buick', series: ['英朗', '君威', '君越', '昂科威', '昂科旗'] },
      { name: '保时捷', english: 'Porsche', series: ['911', 'Cayenne', 'Macan', 'Panamera', 'Taycan'] },
      { name: '本田', english: 'Honda', series: ['雅阁', '思域', 'CR-V', '冠道', '奥德赛'] },
      { name: '标致', english: 'Peugeot', series: ['308', '408', '508', '3008', '5008'] },
      { name: '北京汽车', english: 'BAIC', series: ['EU5', 'EU7', 'X7'] }
    ],
    'C': [
      { name: '长安', english: 'Changan', series: ['逸动', 'CS35', 'CS55', 'CS75', 'UNI-T', 'UNI-K'] },
      { name: '长城', english: 'Great Wall', series: ['哈弗H6', '哈弗大狗', '坦克300', '坦克500'] },
      { name: '传祺', english: 'Trumpchi', series: ['GA6', 'GS4', 'GS8', 'M8'] },
      { name: '大众', english: 'Volkswagen', series: ['朗逸', '帕萨特', '迈腾', '途观', '途昂'] },
      { name: '丰田', english: 'Toyota', series: ['凯美瑞', '卡罗拉', 'RAV4', '汉兰达', '普拉多'] },
      { name: '福特', english: 'Ford', series: ['福克斯', '蒙迪欧', '锐界', '探险者'] },
      { name: '法拉利', english: 'Ferrari', series: ['F8', 'SF90', 'Roma', 'Purosangue'] },
      { name: '创维汽车', english: 'Skyworth', series: ['创维汽车'] }
    ],
    'D': [
      { name: '东风', english: 'Dongfeng', series: ['风神AX7', '奕炫', '启辰D60'] },
      { name: '大通', english: 'Maxus', series: ['G10', 'G20', 'D90'] },
      { name: '道奇', english: 'Dodge', series: ['挑战者', '战马'] },
      { name: 'DS', english: 'DS', series: ['DS 7', 'DS 9'] },
      { name: '东风日产', english: 'Dongfeng Nissan', series: ['轩逸', '天籁', '奇骏', '逍客'] },
      { name: '东风本田', english: 'Dongfeng Honda', series: ['思域', 'CR-V', 'UR-V'] },
      { name: '东风标致', english: 'Dongfeng Peugeot', series: ['308', '408', '508'] },
      { name: '东风雪铁龙', english: 'Dongfeng Citroen', series: ['C4L', 'C5', 'C6'] }
    ],
    'F': [
      { name: '丰田', english: 'Toyota', series: ['凯美瑞', '卡罗拉', 'RAV4', '汉兰达', '普拉多'] },
      { name: '福特', english: 'Ford', series: ['福克斯', '蒙迪欧', '锐界', '探险者'] },
      { name: '法拉利', english: 'Ferrari', series: ['F8', 'SF90', 'Roma', 'Purosangue'] },
      { name: '菲亚特', english: 'Fiat', series: ['500', 'Tipo'] },
      { name: '福田', english: 'Foton', series: ['图雅诺', '风景'] },
      { name: '飞凡', english: 'Feifan', series: ['R7', 'F7'] },
      { name: '方程豹', english: 'Fang Cheng Bao', series: ['豹5'] },
      { name: '福特野马', english: 'Ford Mustang', series: ['野马'] }
    ],
    'G': [
      { name: '广汽', english: 'GAC', series: ['传祺GA6', '传祺GS4', '传祺GS8'] },
      { name: '广汽丰田', english: 'GAC Toyota', series: ['凯美瑞', '雷凌', '威兰达'] },
      { name: '广汽本田', english: 'GAC Honda', series: ['雅阁', '凌派', '冠道'] },
      { name: '广汽传祺', english: 'GAC Trumpchi', series: ['GA6', 'GS4', 'GS8', 'M8'] },
      { name: '广汽埃安', english: 'GAC Aion', series: ['S Plus', 'LX Plus', 'V Plus'] },
      { name: '广汽三菱', english: 'GAC Mitsubishi', series: ['欧蓝德', '劲炫', '奕歌'] },
      { name: '广汽菲克', english: 'GAC FCA', series: ['自由光', '自由侠', '指南者'] },
      { name: '广汽讴歌', english: 'GAC Acura', series: ['CDX', 'RDX', 'TLX-L'] }
    ],
    'H': [
      { name: '红旗', english: 'Hongqi', series: ['H5', 'H7', 'H9', 'HS5', 'HS7'] },
      { name: '哈弗', english: 'Haval', series: ['H6', 'H9', '大狗', '赤兔', '神兽'] },
      { name: '海马', english: 'Haima', series: ['8S', '7X'] },
      { name: '华晨宝马', english: 'BMW Brilliance', series: ['1系', '3系', '5系', 'X1', 'X3'] },
      { name: '华晨中华', english: 'Brilliance', series: ['V3', 'V6', 'V7'] },
      { name: '华晨雷诺', english: 'Brilliance Renault', series: ['观境', '观致'] },
      { name: '华晨鑫源', english: 'Brilliance Xinyuan', series: ['金杯'] },
      { name: '华晨新日', english: 'Brilliance Xinri', series: ['新日'] }
    ],
    'J': [
      { name: '吉利', english: 'Geely', series: ['博越', '星越', '缤越', '帝豪', '远景'] },
      { name: '捷豹', english: 'Jaguar', series: ['XE', 'XF', 'F-PACE', 'E-PACE'] },
      { name: 'Jeep', english: 'Jeep', series: ['自由光', '自由侠', '指南者', '大切诺基'] },
      { name: '江淮', english: 'JAC', series: ['瑞风S3', '瑞风S4', '瑞风S7'] },
      { name: '江铃', english: 'JMC', series: ['驭胜', '域虎', '宝典'] },
      { name: '江铃福特', english: 'JMC Ford', series: ['撼路者', '领界'] },
      { name: '江铃新能源', english: 'JMC New Energy', series: ['易至'] },
      { name: '江铃重汽', english: 'JMC Heavy Truck', series: ['威龙'] }
    ],
    'K': [
      { name: '凯迪拉克', english: 'Cadillac', series: ['CT4', 'CT5', 'XT4', 'XT5', 'XT6'] },
      { name: '凯翼', english: 'Kaiyi', series: ['炫界', '炫界Pro'] },
      { name: '开瑞', english: 'Karry', series: ['K50', 'K60'] },
      { name: '开沃', english: 'Kaiwo', series: ['开沃汽车'] },
      { name: '开瑞新能源', english: 'Karry New Energy', series: ['开瑞新能源'] },
      { name: '开沃新能源', english: 'Kaiwo New Energy', series: ['开沃新能源'] },
      { name: '开瑞重工', english: 'Karry Heavy Industry', series: ['开瑞重工'] },
      { name: '开沃重工', english: 'Kaiwo Heavy Industry', series: ['开沃重工'] }
    ],
    'L': [
      { name: '雷克萨斯', english: 'Lexus', series: ['ES', 'LS', 'RX', 'NX', 'UX'] },
      { name: '路虎', english: 'Land Rover', series: ['揽胜', '发现', '卫士', '极光'] },
      { name: '林肯', english: 'Lincoln', series: ['冒险家', '航海家', '飞行家', '领航员'] },
      { name: '雷诺', english: 'Renault', series: ['科雷傲', '科雷嘉', '科雷缤'] },
      { name: '领克', english: 'Lynk & Co', series: ['01', '02', '03', '05', '06', '09'] },
      { name: '理想', english: 'Li Auto', series: ['L7', 'L8', 'L9'] },
      { name: '零跑', english: 'Leapmotor', series: ['T03', 'C11', 'C01'] },
      { name: '岚图', english: 'Voyah', series: ['FREE', '梦想家'] }
    ],
    'M': [
      { name: '马自达', english: 'Mazda', series: ['昂克赛拉', '阿特兹', 'CX-4', 'CX-5', 'CX-8'] },
      { name: '名爵', english: 'MG', series: ['MG5', 'MG6', 'HS', 'ZS'] },
      { name: '玛莎拉蒂', english: 'Maserati', series: ['Ghibli', 'Levante', 'Grecale'] },
      { name: '迈凯伦', english: 'McLaren', series: ['720S', 'GT', 'Artura'] },
      { name: 'MINI', english: 'MINI', series: ['MINI', 'COUNTRYMAN', 'CLUBMAN'] },
      { name: '摩卡', english: 'Mocha', series: ['摩卡'] },
      { name: '猛士', english: 'Mengshi', series: ['猛士'] },
      { name: '迈巴赫', english: 'Maybach', series: ['S级'] }
    ],
    'N': [
      { name: '日产', english: 'Nissan', series: ['轩逸', '天籁', '奇骏', '逍客', '楼兰'] },
      { name: '哪吒', english: 'Neta', series: ['N01', 'V', 'U'] },
      { name: '牛创', english: 'Niutron', series: ['牛创'] },
      { name: '纳智捷', english: 'Luxgen', series: ['优6', '大7'] },
      { name: '南京依维柯', english: 'Nanjing Iveco', series: ['依维柯'] },
      { name: '南京金龙', english: 'Nanjing Golden Dragon', series: ['金龙'] },
      { name: '南京开沃', english: 'Nanjing Kaiwo', series: ['开沃'] },
      { name: '南京依维柯新能源', english: 'Nanjing Iveco New Energy', series: ['依维柯新能源'] }
    ],
    'O': [
      { name: '欧拉', english: 'ORA', series: ['好猫', '白猫', '黑猫', '闪电猫'] },
      { name: '欧宝', english: 'Opel', series: ['英速亚', '雅特'] },
      { name: '欧尚', english: 'Oushang', series: ['欧尚X5', '欧尚X7'] },
      { name: '欧蓝德', english: 'Outlander', series: ['欧蓝德'] },
      { name: '欧力威', english: 'Ouliv', series: ['欧力威'] },
      { name: '欧诺', english: 'Ouno', series: ['欧诺'] },
      { name: '欧力威新能源', english: 'Ouliv New Energy', series: ['欧力威新能源'] },
      { name: '欧诺新能源', english: 'Ouno New Energy', series: ['欧诺新能源'] }
    ],
    'P': [
      { name: '帕加尼', english: 'Pagani', series: ['Huayra', 'Zonda'] },
      { name: 'Polestar', english: 'Polestar', series: ['Polestar 1', 'Polestar 2'] },
      { name: '朋克', english: 'Punk', series: ['朋克'] },
      { name: '朋克新能源', english: 'Punk New Energy', series: ['朋克新能源'] },
      { name: '朋克重工', english: 'Punk Heavy Industry', series: ['朋克重工'] },
      { name: '朋克新能源重工', english: 'Punk New Energy Heavy Industry', series: ['朋克新能源重工'] },
      { name: '朋克新能源重工新能源', english: 'Punk New Energy Heavy Industry New Energy', series: ['朋克新能源重工新能源'] },
      { name: '朋克新能源重工新能源重工', english: 'Punk New Energy Heavy Industry New Energy Heavy Industry', series: ['朋克新能源重工新能源重工'] }
    ],
    'Q': [
      { name: '奇瑞', english: 'Chery', series: ['艾瑞泽5', '瑞虎7', '瑞虎8', '小蚂蚁'] },
      { name: '起亚', english: 'Kia', series: ['K3', 'K5', '智跑', 'KX5', '嘉华'] },
      { name: '启辰', english: 'Venucia', series: ['D60', 'T60', 'T90'] },
      { name: '前途', english: 'Qiantu', series: ['K50'] },
      { name: '奇点', english: 'Singulato', series: ['奇点'] },
      { name: '奇瑞新能源', english: 'Chery New Energy', series: ['小蚂蚁', '大蚂蚁'] },
      { name: '奇瑞捷豹路虎', english: 'Chery Jaguar Land Rover', series: ['揽胜极光', '发现神行'] },
      { name: '奇瑞新能源捷豹路虎', english: 'Chery New Energy Jaguar Land Rover', series: ['揽胜极光新能源', '发现神行新能源'] }
    ],
    'R': [
      { name: '荣威', english: 'Roewe', series: ['i5', 'i6', 'RX5', 'RX8'] },
      { name: '日产', english: 'Nissan', series: ['轩逸', '天籁', '奇骏', '逍客', '楼兰'] },
      { name: '瑞虎', english: 'Tiggo', series: ['瑞虎7', '瑞虎8'] },
      { name: '瑞风', english: 'Refine', series: ['瑞风S3', '瑞风S4', '瑞风S7'] },
      { name: '瑞驰', english: 'Ruichi', series: ['瑞驰'] },
      { name: '瑞驰新能源', english: 'Ruichi New Energy', series: ['瑞驰新能源'] },
      { name: '瑞驰重工', english: 'Ruichi Heavy Industry', series: ['瑞驰重工'] },
      { name: '瑞驰新能源重工', english: 'Ruichi New Energy Heavy Industry', series: ['瑞驰新能源重工'] }
    ],
    'S': [
      { name: '斯柯达', english: 'Skoda', series: ['明锐', '速派', '柯米克', '柯珞克'] },
      { name: '斯巴鲁', english: 'Subaru', series: ['森林人', '傲虎', 'XV'] },
      { name: '三菱', english: 'Mitsubishi', series: ['欧蓝德', '劲炫', '奕歌'] },
      { name: '上汽大众', english: 'SAIC Volkswagen', series: ['朗逸', '帕萨特', '途观', '途昂'] },
      { name: '上汽通用', english: 'SAIC GM', series: ['别克', '雪佛兰', '凯迪拉克'] },
      { name: '上汽荣威', english: 'SAIC Roewe', series: ['i5', 'i6', 'RX5', 'RX8'] },
      { name: '上汽名爵', english: 'SAIC MG', series: ['MG5', 'MG6', 'HS', 'ZS'] },
      { name: '上汽大通', english: 'SAIC Maxus', series: ['G10', 'G20', 'D90'] }
    ],
    'T': [
      { name: '特斯拉', english: 'Tesla', series: ['Model 3', 'Model Y', 'Model S', 'Model X'] },
      { name: '坦克', english: 'Tank', series: ['坦克300', '坦克500'] },
      { name: '途观', english: 'Tiguan', series: ['途观L', '途观X'] },
      { name: '途昂', english: 'Teramont', series: ['途昂', '途昂X'] },
      { name: '途锐', english: 'Touareg', series: ['途锐'] },
      { name: '途乐', english: 'Patrol', series: ['途乐'] },
      { name: '途达', english: 'Terra', series: ['途达'] },
      { name: '途胜', english: 'Tucson', series: ['途胜'] }
    ],
    'W': [
      { name: '沃尔沃', english: 'Volvo', series: ['S60', 'S90', 'XC40', 'XC60', 'XC90'] },
      { name: '蔚来', english: 'NIO', series: ['ES6', 'ES8', 'EC6', 'ET7', 'ET5'] },
      { name: '威马', english: 'WM Motor', series: ['EX5', 'EX6', 'W6'] },
      { name: '五菱', english: 'Wuling', series: ['宏光', '宝骏', '凯捷'] },
      { name: '魏牌', english: 'WEY', series: ['VV5', 'VV6', 'VV7', '摩卡'] },
      { name: '问界', english: 'AITO', series: ['问界M5', '问界M7', '问界M9'] },
      { name: '威驰', english: 'Vios', series: ['威驰'] },
      { name: '威兰达', english: 'Wildlander', series: ['威兰达'] }
    ],
    'X': [
      { name: '小鹏', english: 'XPeng', series: ['P7', 'P5', 'G3', 'G9'] },
      { name: '现代', english: 'Hyundai', series: ['伊兰特', '索纳塔', '途胜', '胜达'] },
      { name: '雪佛兰', english: 'Chevrolet', series: ['科鲁兹', '迈锐宝', '探界者', '开拓者'] },
      { name: '雪铁龙', english: 'Citroen', series: ['C4L', 'C5', 'C6', '天逸'] },
      { name: '星途', english: 'Exeed', series: ['LX', 'TX', 'VX'] },
      { name: '新宝骏', english: 'New Baojun', series: ['RS-3', 'RS-5', 'RC-6'] },
      { name: '新特', english: 'Singulato', series: ['新特'] },
      { name: '小蚂蚁', english: 'Little Ant', series: ['小蚂蚁'] }
    ],
    'Y': [
      { name: '一汽大众', english: 'FAW Volkswagen', series: ['宝来', '速腾', '高尔夫', '探岳'] },
      { name: '一汽丰田', english: 'FAW Toyota', series: ['卡罗拉', 'RAV4', '普拉多'] },
      { name: '一汽马自达', english: 'FAW Mazda', series: ['阿特兹', 'CX-4'] },
      { name: '一汽红旗', english: 'FAW Hongqi', series: ['H5', 'H7', 'H9', 'HS5'] },
      { name: '一汽奔腾', english: 'FAW Besturn', series: ['B30', 'B50', 'X40', 'X80'] },
      { name: '一汽夏利', english: 'FAW Xiali', series: ['夏利'] },
      { name: '一汽吉林', english: 'FAW Jilin', series: ['森雅'] },
      { name: '一汽海马', english: 'FAW Haima', series: ['海马'] }
    ],
    'Z': [
      { name: '众泰', english: 'Zotye', series: ['T600', 'SR7', 'SR9'] },
      { name: '知豆', english: 'Zhido', series: ['知豆'] },
      { name: '中兴', english: 'ZTE', series: ['中兴'] },
      { name: '中通', english: 'Zhongtong', series: ['中通'] },
      { name: '中车', english: 'CRRC', series: ['中车'] },
      { name: '中集', english: 'CIMC', series: ['中集'] },
      { name: '中联', english: 'Zoomlion', series: ['中联'] },
      { name: '中重', english: 'Sinotruk', series: ['中重'] }
    ]
  }

  // 品牌字母列表
  const brandLetters = Object.keys(brandData)

  // 热门车型数据
  const popularCars = {
    '轿车': [
      { name: '凯美瑞', tag: '新', price: '17.98-26.98万' },
      { name: '帕萨特', price: '18.19-25.29万' },
      { name: '迈腾', price: '18.69-30.99万' },
      { name: '宝马3系', price: '29.99-39.99万' },
      { name: '奥迪A6L', price: '41.98-65.68万' }
    ],
    'SUV': [
      { name: '星越L', price: '13.72-18.52万' },
      { name: 'Model Y', price: '25.89-36.39万' },
      { name: '途观L', price: '19.90-26.08万' },
      { name: '汉兰达', price: '26.88-34.88万' },
      { name: '本田CR-V', price: '16.98-27.68万' }
    ],
    '其他': [
      { name: '奥德赛', price: '23.58-43.98万' },
      { name: '保时捷911', price: '131.80-311.45万' },
      { name: '保时捷718', price: '56.50-157.80万' },
      { name: 'AMG GT', price: '98.48-229.88万' },
      { name: '炮', price: '9.78-29.00万' }
    ]
  }

  // 品牌数据
  const brands = [
    '奔驰', '大众', '宝马', '奥迪', '红旗', '保时捷', '丰田', '沃尔沃', '本田'
  ]

  // 近期新车数据
  const recentCars = [
    {
      name: '奥迪A5L Sportback',
      status: '2025.8.1-已上市',
      tag: '全新车系',
      price: '27.99-39.99万',
      image: '/img/audi-a5l.jpg',
      followers: '2.5w车友进圈热聊新车',
      description: '上汽奥迪A5L开启预售'
    },
    {
      name: '途锐',
      status: '2025.8.1-已上市',
      tag: '小改款',
      price: '50.88-79.38万',
      image: '/img/touareg.jpg',
      followers: '7.9w车友进圈热聊新车',
      description: '大众途锐新车型上市'
    }
  ]

  // 今日要闻数据
  const newsData = [
    {
      title: '深蓝S05 620公里车型上市',
      price: '售12.99万元起/限时12.59万元起',
      image: '/img/deep-blue-s05.jpg',
      tag: '原创'
    },
    { title: '全新小鹏P7微星灰官图 | 上汽奥迪A5L Sportback上市' },
    { title: '传祺向往M8鸿蒙座舱版上市 | 星途最新购车政策 新款智己LS6实车内饰曝光' },
    { title: '极狐T1内饰官图 欧拉8月购车权益 新款现代IONIQ 6售价曝光' },
    { title: '2025款凌宝BOX金芒版实车 2025款五菱星光S开启下订 | 别克GL8陆尚8月购车政策' },
    { title: '极氪9X最新官图 2025款福田祥菱V5 EV上市 深蓝S05620公里车型上市' },
    { title: '奇瑞瑞虎8 PLUS经典版上市 长安启源A06亮相 新款五菱扬光上市' },
    { title: '新款问界M7官图 东风风神L7X上市 长安跨越星光上市 全新小鹏P7最新官图' }
  ]

  // 返回顶部函数
  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    })
  }

  // 选车数据 - 直接在前端定义
  const carSelectionData = {
    categories: [
      {
        name: "热门车型",
        cars: [
          { name: "奔驰C级", price: "29.99万起", image: "https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop" },
          { name: "宝马3系", price: "29.99万起", image: "https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop" },
          { name: "奥迪A4L", price: "30.99万起", image: "https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop" },
          { name: "特斯拉Model 3", price: "25.89万起", image: "https://images.unsplash.com/photo-1560958089-b8a1929cea89?w=300&h=200&fit=crop" }
        ]
      },
      {
        name: "新能源",
        cars: [
          { name: "比亚迪汉", price: "25.98万起", image: "https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop" },
          { name: "蔚来ET7", price: "45.80万起", image: "https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop" },
          { name: "小鹏P7", price: "28.99万起", image: "https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop" },
          { name: "理想L9", price: "45.98万起", image: "https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop" }
        ]
      },
      {
        name: "SUV",
        cars: [
          { name: "丰田汉兰达", price: "26.88万起", image: "https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop" },
          { name: "本田CR-V", price: "16.98万起", image: "https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop" },
          { name: "大众途观L", price: "19.90万起", image: "https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop" },
          { name: "哈弗H6", price: "9.89万起", image: "https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=300&h=200&fit=crop" }
        ]
      },
      {
        name: "轿车",
        cars: [
          { name: "丰田凯美瑞", price: "17.98万起", image: "https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?w=300&h=200&fit=crop" },
          { name: "本田雅阁", price: "16.98万起", image: "https://images.unsplash.com/photo-1541899481282-d53bffe3c54d?w=300&h=200&fit=crop" },
          { name: "日产天籁", price: "17.98万起", image: "https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=300&h=200&fit=crop" },
          { name: "大众帕萨特", price: "18.19万起", image: "https://images.unsplash.com/photo-1555215695-3004980ad54e?w=300&h=200&fit=crop" }
        ]
      }
    ],
    quickActions: [
      { name: "价格筛选", icon: "💰", description: "按价格区间筛选车型" },
      { name: "品牌筛选", icon: "🏷️", description: "按品牌筛选车型" },
      { name: "车型筛选", icon: "🚗", description: "按车型类别筛选" },
      { name: "对比功能", icon: "⚖️", description: "多车型对比分析" }
    ],
    recommendations: [
      { title: "本月热门", count: "2.3万人在选" },
      { title: "新能源推荐", count: "1.8万人在选" },
      { title: "性价比之选", count: "3.1万人在选" },
      { title: "豪华品牌", count: "1.2万人在选" }
    ]
  }

  // 处理选车悬停
  const handleCarSelectionHover = () => {
    setShowCarSelectionHover(true)
  }

  // 处理选车悬停离开
  const handleCarSelectionLeave = () => {
    setShowCarSelectionHover(false)
  }

  return (
    <div style={{ 
      display: 'flex', 
      fontFamily: 'Arial, sans-serif', 
      backgroundColor: '#f5f5f5', 
      minHeight: '100vh'
    }}>
      <style>
        {`
          @keyframes pulse {
            0% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.7; transform: scale(1.1); }
            100% { opacity: 1; transform: scale(1); }
          }
          
          @keyframes slideIn {
            from { transform: translateX(-100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
          }
          
          .sidebar-item:hover {
            background-color: #f8f9fa !important;
            transform: translateX(5px) !important;
          }
          
          .sidebar-item.active {
            background-color: #fff3e0 !important;
            color: #ff6b35 !important;
            border-left: 4px solid #ff6b35 !important;
          }
        `}
      </style>
      {/* 左侧导航栏 */}
      <div style={{
        width: '220px',
        backgroundColor: 'linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%)',
        borderRight: '1px solid #e8e9ea',
        display: 'flex',
        flexDirection: 'column',
        position: 'fixed',
        left: 0,
        top: 0,
        height: '100vh',
        zIndex: 1000,
        boxShadow: '2px 0 10px rgba(0,0,0,0.05)',
        overflowY: 'auto'
      }}>
        {/* Logo区域 */}
        <div style={{
          padding: '25px 20px',
          borderBottom: '1px solid #e8e9ea',
          textAlign: 'center',
          background: 'linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%)',
          color: 'white'
        }}>
          <div style={{
            fontSize: '26px',
            fontWeight: 'bold',
            marginBottom: '8px',
            textShadow: '0 2px 4px rgba(0,0,0,0.1)'
          }}>
            車博士
          </div>
          <div style={{
            fontSize: '12px',
            opacity: 0.9,
            marginBottom: '12px'
          }}>
            专业汽车服务平台
          </div>
          <div style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            gap: '8px'
          }}>
            <img
              src="/src/1.jpg"
              alt="車博士Logo"
              style={{
                width: '60px',
                height: '60px',
                objectFit: 'contain',
                borderRadius: '8px',
                border: '2px solid rgba(255,255,255,0.3)'
              }}
            />
            <div style={{
              fontSize: '10px',
              opacity: 0.8,
              textAlign: 'left'
            }}>
              <div>智能选车</div>
              <div>专业服务</div>
            </div>
          </div>
        </div>

        {/* 用户信息区域 */}
        <div style={{
          padding: '15px 20px',
          borderBottom: '1px solid #e8e9ea',
          backgroundColor: '#f8f9fa'
        }}>
          <div style={{
            display: 'flex',
            alignItems: 'center',
            gap: '10px',
            marginBottom: '8px'
          }}>
                          <div 
                onClick={() => {
                  console.log('用户登录')
                  navigate('/login')
                }}
              style={{
                width: '32px',
                height: '32px',
                borderRadius: '50%',
                backgroundColor: '#ff6b35',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                color: 'white',
                fontSize: '14px',
                cursor: 'pointer',
                transition: 'all 0.3s ease'
              }}
              onMouseEnter={(e) => {
                e.target.style.transform = 'scale(1.1)'
                e.target.style.boxShadow = '0 4px 12px rgba(255,107,53,0.3)'
              }}
              onMouseLeave={(e) => {
                e.target.style.transform = 'scale(1)'
                e.target.style.boxShadow = 'none'
              }}
            >
              👤
            </div>
            <div style={{ flex: 1 }}>
              <div style={{
                fontSize: '14px',
                fontWeight: 'bold',
                color: '#333'
              }}>
                欢迎使用
              </div>
              <div style={{
                fontSize: '12px',
                color: '#666',
                marginTop: '2px'
              }}>
                点击登录获取更多服务
              </div>
            </div>
          </div>
        </div>

        {/* 导航菜单 */}
        <div style={{ flex: 1, padding: '15px 0' }}>
          {navItems.map((item, index) => (
            <div
              key={index}
              className={`sidebar-item ${activeTab === item.id ? 'active' : ''}`}
              onClick={() => {
                setActiveTab(item.id)
                navigate(item.path)
              }}
              onMouseEnter={item.id === '选车' ? handleCarSelectionHover : undefined}
              onMouseLeave={item.id === '选车' ? handleCarSelectionLeave : undefined}
              style={{
                padding: '12px 20px',
                cursor: 'pointer',
                backgroundColor: activeTab === item.id ? '#fff3e0' : 'transparent',
                color: activeTab === item.id ? '#ff6b35' : '#555',
                borderLeft: activeTab === item.id ? '4px solid #ff6b35' : '4px solid transparent',
                display: 'flex',
                alignItems: 'center',
                gap: '12px',
                fontSize: '14px',
                transition: 'all 0.3s ease',
                margin: '2px 10px',
                borderRadius: '8px',
                position: 'relative',
                overflow: 'hidden'
              }}
            >
              <span style={{ 
                fontSize: '18px',
                transition: 'all 0.3s ease'
              }}>
                {item.icon}
              </span>
              <span style={{
                fontWeight: activeTab === item.id ? '600' : '400',
                transition: 'all 0.3s ease'
              }}>
                {item.id}
              </span>
              {activeTab === item.id && (
                <div style={{
                  position: 'absolute',
                  right: '10px',
                  width: '6px',
                  height: '6px',
                  borderRadius: '50%',
                  backgroundColor: '#ff6b35',
                  animation: 'pulse 2s infinite'
                }} />
              )}
            </div>
          ))}
        </div>

        {/* 底部功能区 */}
        <div style={{
          padding: '15px 20px',
          borderTop: '1px solid #e8e9ea',
          backgroundColor: '#f8f9fa'
        }}>
          <QuickFunctions />
        </div>
      </div>

      {/* 选车悬停弹窗 */}
      {showCarSelectionHover && (
        <div
          style={{
            position: 'fixed',
            left: '240px',
            top: '120px',
            backgroundColor: 'white',
            borderRadius: '12px',
            boxShadow: '0 8px 32px rgba(0,0,0,0.15)',
            zIndex: 1001,
            width: '600px',
            maxHeight: '500px',
            overflow: 'hidden',
            border: '1px solid #e8e9ea',
            animation: 'slideIn 0.3s ease'
          }}
          onMouseEnter={() => setShowCarSelectionHover(true)}
          onMouseLeave={() => setShowCarSelectionHover(false)}
        >
          {/* 弹窗头部 */}
          <div style={{
            padding: '15px 20px',
            borderBottom: '1px solid #e8e9ea',
            backgroundColor: '#f8f9fa',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between'
          }}>
            <div style={{
              fontSize: '16px',
              fontWeight: 'bold',
              color: '#333'
            }}>
              🚗 智能选车助手
            </div>
            <div style={{
              fontSize: '12px',
              color: '#666'
            }}>
              前端数据
            </div>
          </div>

          {/* 弹窗内容 */}
                      <div style={{
              padding: '20px',
              maxHeight: '400px',
              overflowY: 'auto'
            }}>
              {carSelectionData ? (
              <div>
                {/* 快速操作 */}
                <div style={{ marginBottom: '20px' }}>
                  <div style={{
                    fontSize: '14px',
                    fontWeight: 'bold',
                    marginBottom: '10px',
                    color: '#333'
                  }}>
                    快速操作
                  </div>
                  <div style={{
                    display: 'grid',
                    gridTemplateColumns: 'repeat(2, 1fr)',
                    gap: '10px'
                  }}>
                    {carSelectionData.quickActions.map((action, index) => (
                      <div
                        key={index}
                        style={{
                          padding: '10px',
                          backgroundColor: '#f8f9fa',
                          borderRadius: '8px',
                          cursor: 'pointer',
                          border: '1px solid #e8e9ea',
                          transition: 'all 0.3s ease'
                        }}
                        onMouseEnter={(e) => {
                          e.target.style.backgroundColor = '#ff6b35'
                          e.target.style.color = 'white'
                        }}
                        onMouseLeave={(e) => {
                          e.target.style.backgroundColor = '#f8f9fa'
                          e.target.style.color = '#333'
                        }}
                      >
                        <div style={{
                          display: 'flex',
                          alignItems: 'center',
                          gap: '8px',
                          fontSize: '12px'
                        }}>
                          <span style={{ fontSize: '16px' }}>{action.icon}</span>
                          <div>
                            <div style={{ fontWeight: 'bold' }}>{action.name}</div>
                            <div style={{ fontSize: '10px', color: '#666' }}>{action.description}</div>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>

                {/* 推荐分类 */}
                <div style={{ marginBottom: '20px' }}>
                  <div style={{
                    fontSize: '14px',
                    fontWeight: 'bold',
                    marginBottom: '10px',
                    color: '#333'
                  }}>
                    热门推荐
                  </div>
                  <div style={{
                    display: 'grid',
                    gridTemplateColumns: 'repeat(2, 1fr)',
                    gap: '10px'
                  }}>
                    {carSelectionData.recommendations.map((rec, index) => (
                      <div
                        key={index}
                        style={{
                          padding: '10px',
                          backgroundColor: '#fff3e0',
                          borderRadius: '8px',
                          cursor: 'pointer',
                          border: '1px solid #ff6b35',
                          transition: 'all 0.3s ease'
                        }}
                        onMouseEnter={(e) => {
                          e.target.style.backgroundColor = '#ff6b35'
                          e.target.style.color = 'white'
                        }}
                        onMouseLeave={(e) => {
                          e.target.style.backgroundColor = '#fff3e0'
                          e.target.style.color = '#333'
                        }}
                      >
                        <div style={{ fontSize: '12px', fontWeight: 'bold' }}>{rec.title}</div>
                        <div style={{ fontSize: '10px', color: '#666' }}>{rec.count}</div>
                      </div>
                    ))}
                  </div>
                </div>

                {/* 车型分类 */}
                {carSelectionData.categories.map((category, categoryIndex) => (
                  <div key={categoryIndex} style={{ marginBottom: '20px' }}>
                    <div style={{
                      fontSize: '14px',
                      fontWeight: 'bold',
                      marginBottom: '10px',
                      color: '#333',
                      display: 'flex',
                      alignItems: 'center',
                      gap: '5px'
                    }}>
                      <span>{category.name}</span>
                      <span style={{
                        fontSize: '10px',
                        color: '#666',
                        backgroundColor: '#f0f0f0',
                        padding: '2px 6px',
                        borderRadius: '10px'
                      }}>
                        {category.cars.length}款
                      </span>
                    </div>
                    <div style={{
                      display: 'grid',
                      gridTemplateColumns: 'repeat(2, 1fr)',
                      gap: '10px'
                    }}>
                      {category.cars.map((car, carIndex) => (
                        <div
                          key={carIndex}
                          style={{
                            padding: '10px',
                            backgroundColor: '#f8f9fa',
                            borderRadius: '8px',
                            cursor: 'pointer',
                            border: '1px solid #e8e9ea',
                            transition: 'all 0.3s ease'
                          }}
                          onMouseEnter={(e) => {
                            e.target.style.backgroundColor = '#ff6b35'
                            e.target.style.color = 'white'
                            e.target.style.transform = 'translateY(-2px)'
                          }}
                          onMouseLeave={(e) => {
                            e.target.style.backgroundColor = '#f8f9fa'
                            e.target.style.color = '#333'
                            e.target.style.transform = 'translateY(0)'
                          }}
                        >
                          <div style={{
                            display: 'flex',
                            alignItems: 'center',
                            gap: '8px'
                          }}>
                            <img
                              src={car.image}
                              alt={car.name}
                              style={{
                                width: '40px',
                                height: '30px',
                                objectFit: 'cover',
                                borderRadius: '4px'
                              }}
                            />
                            <div style={{ flex: 1 }}>
                              <div style={{
                                fontSize: '12px',
                                fontWeight: 'bold'
                              }}>
                                {car.name}
                              </div>
                              <div style={{
                                fontSize: '10px',
                                color: '#ff6b35'
                              }}>
                                {car.price}
                              </div>
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            ) : null}
          </div>
        </div>
      )}

      {/* 主内容区域 */}
      <div style={{ marginLeft: '220px', flex: 1 }}>
        {/* 顶部导航栏 */}
        <div style={{
          backgroundColor: 'white',
          borderBottom: '1px solid #e5e5e5',
          padding: '0 20px',
          position: 'sticky',
          top: 0,
          zIndex: 999
        }}>
          <div style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            height: '60px'
          }}>
            {/* 左侧 */}
            <div style={{ display: 'flex', alignItems: 'center', gap: '20px' }}>
              <div style={{ fontSize: '20px', cursor: 'pointer' }}>☰</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                <div style={{
                  width: '30px',
                  height: '30px',
                  backgroundColor: '#ff6b35',
                  borderRadius: '50%',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  color: 'white',
                  fontSize: '16px'
                }}>
                  <img src="/src/1.jpg" alt="車博士Logo" style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
                </div>
                <div style={{ fontSize: '18px', fontWeight: 'bold' }}>車博士</div>
              </div>
              <div
                onClick={() => setShowCitySelector(!showCitySelector)}
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: '5px',
                  cursor: 'pointer',
                  padding: '5px 10px',
                  borderRadius: '4px',
                  backgroundColor: '#f5f5f5'
                }}
              >
                <span>{selectedCity}</span>
                <span style={{ fontSize: '12px' }}>▼</span>
              </div>
            </div>

            {/* 中间搜索栏 */}
            <div
              className="search-container"
              style={{
                position: 'relative',
                display: 'flex',
                alignItems: 'center',
                backgroundColor: '#f5f5f5',
                borderRadius: '20px',
                padding: '5px 15px',
                width: '400px'
              }}
            >
              <form onSubmit={handleSearchSubmit} style={{ display: 'flex', alignItems: 'center', flex: 1 }}>
                <input
                  type="text"
                  placeholder="搜索车型、品牌、车系..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  onFocus={() => setShowSearchHistory(true)}
                  style={{
                    border: 'none',
                    backgroundColor: 'transparent',
                    flex: 1,
                    outline: 'none',
                    fontSize: '14px'
                  }}
                />
                <button
                  type="submit"
                  style={{
                    backgroundColor: '#ff6b35',
                    color: 'white',
                    border: 'none',
                    padding: '8px 15px',
                    borderRadius: '15px',
                    cursor: 'pointer',
                    fontSize: '14px'
                  }}
                >
                  {isSearching ? '搜索中...' : '搜索'}
                </button>
              </form>

              {/* 搜索历史和结果下拉框 */}
              {(showSearchHistory || searchResults.length > 0) && (
                <div style={{
                  position: 'absolute',
                  top: '100%',
                  left: 0,
                  right: 0,
                  backgroundColor: 'white',
                  borderRadius: '8px',
                  boxShadow: '0 4px 20px rgba(0,0,0,0.15)',
                  zIndex: 1002,
                  marginTop: '5px',
                  maxHeight: '400px',
                  overflow: 'auto'
                }}>
                  {/* 搜索历史 */}
                  {showSearchHistory && searchHistory.length > 0 && (
                    <div style={{ padding: '15px' }}>
                      <div style={{
                        display: 'flex',
                        justifyContent: 'space-between',
                        alignItems: 'center',
                        marginBottom: '10px'
                      }}>
                        <span style={{ fontSize: '14px', color: '#666' }}>搜索历史</span>
                        <button
                          onClick={clearSearchHistory}
                          style={{
                            border: 'none',
                            background: 'none',
                            color: '#999',
                            cursor: 'pointer',
                            fontSize: '12px'
                          }}
                        >
                          清空
                        </button>
                      </div>
                      {searchHistory.map((item, index) => (
                        <div
                          key={index}
                          style={{
                            display: 'flex',
                            justifyContent: 'space-between',
                            alignItems: 'center',
                            padding: '8px 0',
                            cursor: 'pointer',
                            borderBottom: '1px solid #f0f0f0'
                          }}
                          onClick={() => handleHistoryClick(item)}
                        >
                          <span style={{ fontSize: '14px' }}>{item}</span>
                          <button
                            onClick={(e) => {
                              e.stopPropagation()
                              removeSearchHistoryItem(index)
                            }}
                            style={{
                              border: 'none',
                              background: 'none',
                              color: '#999',
                              cursor: 'pointer',
                              fontSize: '12px'
                            }}
                          >
                            ×
                          </button>
                        </div>
                      ))}
                    </div>
                  )}

                  {/* 搜索结果 */}
                  {searchResults.length > 0 && (
                    <div style={{ padding: '15px' }}>
                      <div style={{ fontSize: '14px', color: '#666', marginBottom: '10px' }}>
                        搜索结果
                      </div>
                      {searchResults.map((result, index) => (
                        <div
                          key={index}
                          style={{
                            padding: '10px 0',
                            cursor: 'pointer',
                            borderBottom: '1px solid #f0f0f0',
                            display: 'flex',
                            alignItems: 'center',
                            gap: '10px'
                          }}
                          onClick={() => handleResultClick(result)}
                        >
                          <div style={{
                            width: '8px',
                            height: '8px',
                            borderRadius: '50%',
                            backgroundColor: result.type === 'brand' ? '#ff6b35' :
                              result.type === 'series' ? '#4CAF50' :
                                result.type === 'model' ? '#2196F3' : '#9C27B0'
                          }} />
                          <div style={{ flex: 1 }}>
                            <div style={{ fontSize: '14px', fontWeight: 'bold' }}>
                              {result.name || result.title}
                            </div>
                            {result.brand && (
                              <div style={{ fontSize: '12px', color: '#666' }}>
                                {result.brand} - {result.name}
                              </div>
                            )}
                            {result.price && (
                              <div style={{ fontSize: '12px', color: '#ff6b35' }}>
                                {result.price}
                              </div>
                            )}
                            {result.location && (
                              <div style={{ fontSize: '12px', color: '#666' }}>
                                {result.location}
                              </div>
                            )}
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              )}
            </div>

            {/* 右侧功能按钮 */}
            <div style={{ display: 'flex', alignItems: 'center', gap: '15px' }}>
              <span style={{ fontSize: '14px', cursor: 'pointer' }}>业务合作</span>
              <span style={{ fontSize: '14px', cursor: 'pointer' }}>添加到桌面</span>
              <span style={{ fontSize: '14px', cursor: 'pointer' }}>小程序</span>
              <span style={{ fontSize: '14px', cursor: 'pointer' }}>下载App</span>
              <span style={{ fontSize: '14px', cursor: 'pointer' }} onClick={()=>{
                navigate("/shang")
              }}>发布作品</span>
              <div style={{
                width: '30px',
                height: '30px',
                borderRadius: '50%',
                backgroundColor: '#f5f5f5',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                cursor: 'pointer'
              }}>
                👤
              </div>
            </div>
          </div>
        </div>

        {/* 城市选择器模态框 */}
        {showCitySelector && (
          <div style={{
            position: 'fixed',
            top: '60px',
            left: '220px',
            backgroundColor: 'white',
            borderRadius: '8px',
            boxShadow: '0 4px 20px rgba(0,0,0,0.15)',
            zIndex: 1001,
            width: '600px',
            maxHeight: '500px',
            overflow: 'hidden'
          }}>
            {/* 模态框头部 */}
            <div style={{
              padding: '15px 20px',
              borderBottom: '1px solid #eee',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between'
            }}>
              <div style={{ fontSize: '16px', fontWeight: 'bold' }}>选择城市</div>
              <button
                onClick={() => setShowCitySelector(false)}
                style={{
                  border: 'none',
                  background: 'none',
                  fontSize: '20px',
                  cursor: 'pointer',
                  color: '#666'
                }}
              >
                ×
              </button>
            </div>

            {/* 模态框内容 */}
            <div style={{ display: 'flex', height: '400px' }}>
              {/* 左侧字母索引 */}
              <div style={{
                width: '60px',
                borderRight: '1px solid #eee',
                overflowY: 'auto',
                backgroundColor: '#f8f9fa'
              }}>
                {letters.map((letter) => (
                  <div
                    key={letter}
                    onClick={() => {
                      setActiveLetter(letter)
                      // 滚动到对应的字母分类
                      setTimeout(() => {
                        const element = document.getElementById(`letter-${letter}`)
                        const container = document.getElementById('city-list-container')
                        if (element && container) {
                          const elementTop = element.offsetTop
                          const containerTop = container.scrollTop

                          // 计算滚动位置，让选中的字母分类显示在容器顶部
                          const scrollTop = elementTop - container.offsetTop - 20
                          container.scrollTo({
                            top: scrollTop,
                            behavior: 'smooth'
                          })
                        }
                      }, 100)
                    }}
                    style={{
                      padding: '10px',
                      textAlign: 'center',
                      cursor: 'pointer',
                      backgroundColor: activeLetter === letter ? '#ff6b35' : 'transparent',
                      color: activeLetter === letter ? 'white' : '#333',
                      fontSize: '14px',
                      fontWeight: 'bold'
                    }}
                  >
                    {letter}
                  </div>
                ))}
              </div>

              {/* 右侧城市列表 */}
              <div
                ref={(el) => {
                  if (el) {
                    el.scrollTop = 0
                  }
                }}
                id="city-list-container"
                style={{
                  flex: 1,
                  overflowY: 'auto',
                  padding: '20px'
                }}
              >
                {/* 热门城市 */}
                <div style={{ marginBottom: '30px' }}>
                  <div style={{
                    fontSize: '16px',
                    fontWeight: 'bold',
                    marginBottom: '15px',
                    color: '#ff6b35'
                  }}>
                    热门城市
                  </div>
                  <div style={{
                    display: 'grid',
                    gridTemplateColumns: 'repeat(4, 1fr)',
                    gap: '10px'
                  }}>
                    {hotCities.map((city, index) => (
                      <div
                        key={index}
                        onClick={() => {
                          setSelectedCity(city)
                          setShowCitySelector(false)
                        }}
                        style={{
                          padding: '8px 12px',
                          backgroundColor: '#f5f5f5',
                          borderRadius: '4px',
                          cursor: 'pointer',
                          textAlign: 'center',
                          fontSize: '14px',
                          transition: 'all 0.2s'
                        }}
                      >
                        {city}
                      </div>
                    ))}
                  </div>
                </div>

                {/* 按字母分类的城市 */}
                {letters.map((letter) => (
                  <div
                    key={letter}
                    id={`letter-${letter}`}
                    style={{ marginBottom: '20px' }}
                  >
                    <div style={{
                      fontSize: '16px',
                      fontWeight: 'bold',
                      marginBottom: '10px',
                      color: '#333'
                    }}>
                      {letter}
                    </div>
                    <div style={{
                      display: 'grid',
                      gridTemplateColumns: 'repeat(4, 1fr)',
                      gap: '10px'
                    }}>
                      {cityData[letter].map((city, index) => (
                        <div
                          key={index}
                          onClick={() => {
                            setSelectedCity(city)
                            setShowCitySelector(false)
                          }}
                          style={{
                            padding: '8px 12px',
                            backgroundColor: '#f5f5f5',
                            borderRadius: '4px',
                            cursor: 'pointer',
                            textAlign: 'center',
                            fontSize: '14px',
                            transition: 'all 0.2s'
                          }}
                        >
                          {city}
                        </div>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}

        {/* 品牌选择器模态框 */}
        {showBrandSelector && (
          <div style={{
            position: 'fixed',
            top: '60px',
            left: '200px',
            backgroundColor: 'white',
            borderRadius: '8px',
            boxShadow: '0 4px 20px rgba(0,0,0,0.15)',
            zIndex: 1001,
            width: '800px',
            maxHeight: '600px',
            overflow: 'hidden'
          }}>
            {/* 模态框头部 */}
            <div style={{
              padding: '15px 20px',
              borderBottom: '1px solid #eee',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between'
            }}>
              <div style={{ fontSize: '16px', fontWeight: 'bold' }}>
                {selectedBrand ? `选择${selectedBrand}车系` : '选择品牌/车系'}
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                {selectedBrand && (
                  <button
                    onClick={() => {
                      setSelectedBrand('')
                      setSelectedSeries('')
                    }}
                    style={{
                      border: 'none',
                      background: '#f5f5f5',
                      padding: '5px 10px',
                      borderRadius: '4px',
                      cursor: 'pointer',
                      fontSize: '12px',
                      color: '#666'
                    }}
                  >
                    返回品牌
                  </button>
                )}
                <button
                  onClick={() => setShowBrandSelector(false)}
                  style={{
                    border: 'none',
                    background: 'none',
                    fontSize: '20px',
                    cursor: 'pointer',
                    color: '#666'
                  }}
                >
                  ×
                </button>
              </div>
            </div>

            {/* 模态框内容 */}
            <div style={{ display: 'flex', height: '500px' }}>
              {!selectedBrand ? (
                <>
                  {/* 左侧字母索引 */}
                  <div style={{
                    width: '60px',
                    borderRight: '1px solid #eee',
                    overflowY: 'auto',
                    backgroundColor: '#f8f9fa'
                  }}>
                    {brandLetters.map((letter) => (
                      <div
                        key={letter}
                        onClick={() => {
                          setActiveBrandLetter(letter)
                          // 滚动到对应的字母分类
                          setTimeout(() => {
                            const element = document.getElementById(`brand-letter-${letter}`)
                            const container = document.getElementById('brand-list-container')
                            if (element && container) {
                              const elementTop = element.offsetTop
                              const containerTop = container.scrollTop

                              // 计算滚动位置，让选中的字母分类显示在容器顶部
                              const scrollTop = elementTop - container.offsetTop - 20
                              container.scrollTo({
                                top: scrollTop,
                                behavior: 'smooth'
                              })
                            }
                          }, 100)
                        }}
                        style={{
                          padding: '10px',
                          textAlign: 'center',
                          cursor: 'pointer',
                          backgroundColor: activeBrandLetter === letter ? '#ff6b35' : 'transparent',
                          color: activeBrandLetter === letter ? 'white' : '#333',
                          fontSize: '14px',
                          fontWeight: 'bold'
                        }}
                      >
                        {letter}
                      </div>
                    ))}
                  </div>

                  {/* 右侧品牌列表 */}
                  <div
                    ref={(el) => {
                      if (el) {
                        el.scrollTop = 0
                      }
                    }}
                    id="brand-list-container"
                    style={{
                      flex: 1,
                      overflowY: 'auto',
                      padding: '20px'
                    }}
                  >
                    {/* 按字母分类的品牌 */}
                    {brandLetters.map((letter) => (
                      <div
                        key={letter}
                        id={`brand-letter-${letter}`}
                        style={{ marginBottom: '20px' }}
                      >
                        <div style={{
                          fontSize: '16px',
                          fontWeight: 'bold',
                          marginBottom: '10px',
                          color: '#333'
                        }}>
                          {letter}
                        </div>
                        <div style={{
                          display: 'grid',
                          gridTemplateColumns: 'repeat(3, 1fr)',
                          gap: '10px'
                        }}>
                          {brandData[letter].map((brand, index) => (
                            <div
                              key={index}
                              onClick={() => {
                                console.log('点击品牌:', brand.name)
                                setSelectedBrand(brand.name)
                                setSelectedSeries('')
                                // 导航到车型详情页
                                console.log('准备导航到:', `/car-details?brand=${encodeURIComponent(brand.name)}`)
                                navigate(`/car-details?brand=${encodeURIComponent(brand.name)}`)
                              }}
                              style={{
                                padding: '12px',
                                backgroundColor: '#f5f5f5',
                                borderRadius: '6px',
                                cursor: 'pointer',
                                textAlign: 'center',
                                fontSize: '14px',
                                transition: 'all 0.2s',
                                border: '1px solid #e0e0e0'
                              }}
                              onMouseEnter={(e) => {
                                e.target.style.backgroundColor = '#fff3e0'
                                e.target.style.borderColor = '#ff6b35'
                              }}
                              onMouseLeave={(e) => {
                                e.target.style.backgroundColor = '#f5f5f5'
                                e.target.style.borderColor = '#e0e0e0'
                              }}
                            >
                              <div style={{ fontWeight: 'bold', marginBottom: '4px' }}>
                                {brand.name}
                              </div>
                              <div style={{ fontSize: '12px', color: '#666' }}>
                                {brand.english}
                              </div>
                              <div style={{ fontSize: '11px', color: '#999', marginTop: '4px' }}>
                                {brand.series.slice(0, 3).join('、')}
                                {brand.series.length > 3 ? '...' : ''}
                              </div>
                            </div>
                          ))}
                        </div>
                      </div>
                    ))}
                  </div>
                </>
              ) : (
                /* 车型选择界面 */
                <div style={{
                  flex: 1,
                  padding: '20px',
                  overflowY: 'auto'
                }}>
                  <div style={{
                    fontSize: '18px',
                    fontWeight: 'bold',
                    marginBottom: '20px',
                    color: '#333'
                  }}>
                    {selectedBrand} 车系
                  </div>
                  <div style={{
                    display: 'grid',
                    gridTemplateColumns: 'repeat(4, 1fr)',
                    gap: '15px'
                  }}>
                    {(() => {
                      // 找到选中的品牌数据
                      const selectedBrandData = Object.values(brandData)
                        .flat()
                        .find(brand => brand.name === selectedBrand)

                      return selectedBrandData ? selectedBrandData.series.map((series, index) => (
                        <div
                          key={index}
                          onClick={() => {
                            console.log('点击车系:', series)
                            setSelectedSeries(series)
                            setShowBrandSelector(false)
                            // 导航到车型详情页，包含品牌和车系信息
                            console.log('准备导航到:', `/car-details?brand=${encodeURIComponent(selectedBrand)}&series=${encodeURIComponent(series)}`)
                            navigate(`/car-details?brand=${encodeURIComponent(selectedBrand)}&series=${encodeURIComponent(series)}`)
                          }}
                          style={{
                            padding: '15px',
                            backgroundColor: '#f5f5f5',
                            borderRadius: '8px',
                            cursor: 'pointer',
                            textAlign: 'center',
                            fontSize: '14px',
                            transition: 'all 0.2s',
                            border: '2px solid #e0e0e0'
                          }}
                          onMouseEnter={(e) => {
                            e.target.style.backgroundColor = '#fff3e0'
                            e.target.style.borderColor = '#ff6b35'
                          }}
                          onMouseLeave={(e) => {
                            e.target.style.backgroundColor = '#f5f5f5'
                            e.target.style.borderColor = '#e0e0e0'
                          }}
                        >
                          <div style={{ fontWeight: 'bold', fontSize: '16px' }}>
                            {series}
                          </div>
                          <div style={{ fontSize: '12px', color: '#666', marginTop: '5px' }}>
                            {selectedBrand} {series}
                          </div>
                        </div>
                      )) : []
                    })()}
                  </div>
                </div>
              )}
            </div>
          </div>
        )}

        {/* 主要内容 */}
        <div style={{ padding: '20px' }}>
          {/* 明星代言区域 */}
          <div style={{ marginBottom: '30px' }}>
            <div style={{
              backgroundColor: '#ff6b35',
              borderRadius: '12px',
              padding: '30px',
              position: 'relative',
              overflow: 'hidden',
              boxShadow: '0 4px 20px rgba(255, 107, 53, 0.3)'
            }}>
              {/* 背景装饰 */}
              <div style={{
                position: 'absolute',
                top: '-20px',
                right: '-20px',
                width: '200px',
                height: '200px',
                backgroundColor: 'rgba(255, 255, 255, 0.1)',
                borderRadius: '50%'
              }}></div>

              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                {/* 左侧文字内容 */}
                <div style={{ flex: 1, color: 'white', zIndex: 1, position: 'relative' }}>
                  <div style={{
                    fontSize: '28px',
                    fontWeight: 'bold',
                    marginBottom: '15px',
                    lineHeight: '1.2'
                  }}>
                    有我在，不怕没车选
                  </div>
                  <div style={{
                    fontSize: '16px',
                    marginBottom: '20px',
                    opacity: 0.9
                  }}>
                    每天50万辆在售真实车源
                  </div>
                  <div style={{
                    fontSize: '14px',
                    backgroundColor: 'rgba(255, 255, 255, 0.2)',
                    padding: '8px 16px',
                    borderRadius: '20px',
                    display: 'inline-block',
                    border: '1px solid rgba(255, 255, 255, 0.3)'
                  }}>
                    每分钟就有一辆车成交！
                  </div>
                </div>

                {/* 右侧明星头像和按钮 */}
                <div style={{ display: 'flex', alignItems: 'center', gap: '20px', zIndex: 1, position: 'relative' }}>
                  {/* 明星头像 */}
                  <div style={{ position: 'relative' }}>
                    <div style={{
                      width: '120px',
                      height: '120px',
                      borderRadius: '50%',
                      backgroundColor: 'white',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      fontSize: '40px',
                      boxShadow: '0 4px 15px rgba(0, 0, 0, 0.2)'
                    }}>
                      <img src="/src/2.jpg" alt="明星头像" style={{ width: '100%', height: '100%', borderRadius: '50%', objectFit: 'cover', objectPosition: 'center 20%' }} />
                    </div>
                    <div style={{
                      position: 'absolute',
                      bottom: '-5px',
                      left: '50%',
                      transform: 'translateX(-50%)',
                      backgroundColor: 'white',
                      padding: '4px 12px',
                      borderRadius: '12px',
                      fontSize: '12px',
                      color: '#ff6b35',
                      fontWeight: 'bold',
                      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)'
                    }}>
                      車博士
                    </div>
                  </div>

                  {/* 按钮组 */}
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
                    <button style={{
                      backgroundColor: 'white',
                      color: '#ff6b35',
                      border: 'none',
                      padding: '12px 24px',
                      borderRadius: '25px',
                      fontSize: '14px',
                      fontWeight: 'bold',
                      cursor: 'pointer',
                      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
                      transition: 'all 0.3s'
                    }}>
                      我为車博士代言
                    </button>
                    <button style={{
                      backgroundColor: '#007bff',
                      color: 'white',
                      border: 'none',
                      padding: '12px 24px',
                      borderRadius: '25px',
                      fontSize: '14px',
                      fontWeight: 'bold',
                      cursor: 'pointer',
                      boxShadow: '0 4px 15px rgba(0, 123, 255, 0.3)',
                      transition: 'all 0.3s'
                    }}>
                      云南大理车源首席推荐官
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* 车型分类 */}
          <div style={{ marginBottom: '30px' }}>
            <div style={{
              display: 'flex',
              gap: '20px',
              marginBottom: '20px',
              flexWrap: 'wrap'
            }}>
              {carTypes.map((type, index) => (
                <div
                  key={index}
                  style={{
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                    gap: '5px',
                    cursor: 'pointer',
                    padding: '10px',
                    borderRadius: '8px',
                    transition: 'all 0.2s'
                  }}
                >
                  <div style={{ fontSize: '24px' }}>{type.icon}</div>
                  <div style={{ fontSize: '12px' }}>{type.name}</div>
                </div>
              ))}
            </div>

            {/* 主要筛选 */}
            <div style={{
              display: 'flex',
              alignItems: 'center',
              gap: '15px',
              marginBottom: '20px',
              flexWrap: 'wrap'
            }}>
              <div style={{ display: 'flex', gap: '10px' }}>
                <button
                  onClick={() => {
                    setSelectedCarType('新车')
                    handleFilterChange('carType', '新车')
                  }}
                  style={{
                    padding: '8px 16px',
                    border: 'none',
                    borderRadius: '4px',
                    backgroundColor: filterState.carType === '新车' ? '#333' : '#f5f5f5',
                    color: filterState.carType === '新车' ? 'white' : '#333',
                    cursor: 'pointer'
                  }}
                >
                  新车
                </button>
                <button
                  onClick={() => {
                    setSelectedCarType('新能源')
                    handleFilterChange('carType', '新能源')
                  }}
                  style={{
                    padding: '8px 16px',
                    border: 'none',
                    borderRadius: '4px',
                    backgroundColor: filterState.carType === '新能源' ? '#333' : '#f5f5f5',
                    color: filterState.carType === '新能源' ? 'white' : '#333',
                    cursor: 'pointer'
                  }}
                >
                  新能源
                </button>
              </div>
              <div
                style={{
                  padding: '8px 12px',
                  border: '1px solid #ddd',
                  borderRadius: '4px',
                  fontSize: '14px',
                  cursor: 'pointer',
                  backgroundColor: 'white',
                  minHeight: '20px',
                  display: 'flex',
                  alignItems: 'center'
                }}
                onClick={() => setShowBrandSelector(!showBrandSelector)}
              >
                {selectedBrand || '选择品牌/车系'}
              </div>
              <div style={{
                padding: '8px 12px',
                border: '1px solid #ddd',
                borderRadius: '4px',
                fontSize: '14px',
                cursor: 'pointer',
                backgroundColor: 'white',
                minHeight: '20px',
                display: 'flex',
                alignItems: 'center'
              }}>
                {selectedSeries || '选择车型'}
              </div>
              <button style={{
                padding: '8px 16px',
                backgroundColor: '#ff6b35',
                color: 'white',
                border: 'none',
                borderRadius: '4px',
                cursor: 'pointer'
              }}>
                选车
              </button>
              <span style={{ fontSize: '14px', color: '#666', cursor: 'pointer' }}>按品牌找车</span>
              <span style={{ fontSize: '14px', color: '#666', cursor: 'pointer' }}>精准找车</span>
            </div>

            {/* 价格区间 */}
            <div style={{
              display: 'flex',
              gap: '20px',
              marginBottom: '20px',
              flexWrap: 'wrap'
            }}>
              {priceRanges.map((range, index) => (
                <span
                  key={index}
                  onClick={() => {
                    const priceRange = getPriceRange(range)
                    handleFilterChange('priceRange', priceRange)
                  }}
                  style={{
                    fontSize: '14px',
                    cursor: 'pointer',
                    color: filterState.priceRange &&
                      filterState.priceRange[0] === getPriceRange(range)?.[0] &&
                      filterState.priceRange[1] === getPriceRange(range)?.[1] ? '#ff6b35' : '#666',
                    fontWeight: filterState.priceRange &&
                      filterState.priceRange[0] === getPriceRange(range)?.[0] &&
                      filterState.priceRange[1] === getPriceRange(range)?.[1] ? 'bold' : 'normal'
                  }}
                >
                  {range}
                </span>
              ))}
            </div>

            {/* 车系分类 */}
            <div style={{
              display: 'flex',
              gap: '20px',
              marginBottom: '30px',
              flexWrap: 'wrap'
            }}>
              {carOrigins.map((origin, index) => (
                <span
                  key={index}
                  onClick={() => {
                    if (origin === '热门') {
                      handleFilterChange('country', null)
                    } else if (origin === '二手车') {
                      handleFilterChange('carType', '二手车')
                    } else {
                      handleFilterChange('country', origin)
                    }
                  }}
                  style={{
                    fontSize: '14px',
                    cursor: 'pointer',
                    color: (origin === '热门' && !filterState.country) ||
                      (origin === '二手车' && filterState.carType === '二手车') ||
                      (origin !== '热门' && origin !== '二手车' && filterState.country === origin) ? '#ff6b35' : '#666',
                    fontWeight: (origin === '热门' && !filterState.country) ||
                      (origin === '二手车' && filterState.carType === '二手车') ||
                      (origin !== '热门' && origin !== '二手车' && filterState.country === origin) ? 'bold' : 'normal'
                  }}
                >
                  {origin}
                </span>
              ))}
            </div>
          </div>

          {/* 筛选结果展示 */}
          <div style={{ display: 'flex', gap: '30px', marginBottom: '30px' }}>
            {/* 左侧筛选结果 - 瀑布流布局 */}
            <div style={{ flex: 2 }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '20px' }}>
                <h3 style={{ fontSize: '18px' }}>
                  {filteredCars.length > 0 ? `筛选结果 (${filteredCars.length}款车型)` : '暂无符合条件的车型'}
                </h3>
                {(filterState.carType !== '新车' || filterState.priceRange || filterState.brand || filterState.series || filterState.country || filterState.category) && (
                  <button
                    onClick={clearAllFilters}
                    style={{
                      padding: '6px 12px',
                      backgroundColor: '#f5f5f5',
                      color: '#666',
                      border: 'none',
                      borderRadius: '4px',
                      cursor: 'pointer',
                      fontSize: '12px'
                    }}
                  >
                    清除筛选
                  </button>
                )}
              </div>

              {filteredCars.length > 0 ? (
                <div style={{
                  display: 'flex',
                  gap: '15px',
                  position: 'relative'
                }}>
                  {/* 瀑布流列 */}
                  {[0, 1, 2].map((columnIndex) => (
                    <div
                      key={columnIndex}
                      style={{
                        flex: 1,
                        display: 'flex',
                        flexDirection: 'column',
                        gap: '15px'
                      }}
                    >
                      {filteredCars
                        .filter((_, index) => index % 3 === columnIndex)
                        .map((car, index) => (
                          <div
                            key={index}
                            style={{
                              backgroundColor: 'white',
                              padding: '15px',
                              borderRadius: '8px',
                              boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
                              cursor: 'pointer',
                              transition: 'transform 0.2s, box-shadow 0.2s',
                              border: '1px solid #f0f0f0'
                            }}
                            onMouseEnter={(e) => {
                              e.target.style.transform = 'translateY(-2px)'
                              e.target.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)'
                            }}
                            onMouseLeave={(e) => {
                              e.target.style.transform = 'translateY(0)'
                              e.target.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)'
                            }}
                            onClick={() => {
                              navigate(`/car-details?brand=${encodeURIComponent(car.brand)}&series=${encodeURIComponent(car.series)}&name=${encodeURIComponent(car.name)}&price=${car.price}&type=${car.type}&country=${car.country}&category=${car.category}`)
                            }}
                          >
                            {/* 车型图片 */}
                            <div style={{
                              width: '100%',
                              height: '80px',
                              borderRadius: '6px',
                              marginBottom: '10px',
                              overflow: 'hidden',
                              position: 'relative'
                            }}>
                              <img
                                src={getCarImage(car.name)}
                                alt={car.name}
                                style={{
                                  width: '100%',
                                  height: '100%',
                                  objectFit: 'cover',
                                  borderRadius: '6px'
                                }}
                                onError={(e) => {
                                  e.target.style.display = 'none'
                                  e.target.nextSibling.style.display = 'flex'
                                }}
                              />
                              <div style={{
                                width: '100%',
                                height: '100%',
                                backgroundColor: '#f8f9fa',
                                borderRadius: '6px',
                                display: 'none',
                                alignItems: 'center',
                                justifyContent: 'center',
                                fontSize: '12px',
                                color: '#999',
                                border: '1px dashed #ddd'
                              }}>
                                {car.name} 图片
                              </div>
                            </div>

                            <div style={{ display: 'flex', alignItems: 'center', gap: '5px', marginBottom: '8px' }}>
                              <span style={{ fontSize: '14px', fontWeight: 'bold', color: '#333' }}>{car.name}</span>
                              <span style={{
                                backgroundColor: car.type === '新能源' ? '#4CAF50' : car.type === '二手车' ? '#FF9800' : '#ff6b35',
                                color: 'white',
                                padding: '2px 6px',
                                borderRadius: '3px',
                                fontSize: '10px'
                              }}>
                                {car.type}
                              </span>
                            </div>

                            <div style={{
                              fontSize: '12px',
                              color: '#666',
                              marginBottom: '5px'
                            }}>
                              {car.brand} {car.series}
                            </div>

                            <div style={{
                              fontSize: '13px',
                              color: '#ff6b35',
                              fontWeight: 'bold',
                              marginBottom: '8px'
                            }}>
                              {car.price}万起
                            </div>

                            <div style={{
                              fontSize: '11px',
                              color: '#666',
                              marginBottom: '10px',
                              lineHeight: '1.4'
                            }}>
                              点击查看详细配置和报价
                            </div>

                            <div style={{
                              display: 'flex',
                              gap: '8px',
                              fontSize: '11px',
                              borderTop: '1px solid #f0f0f0',
                              paddingTop: '8px'
                            }}>
                              <span style={{
                                color: '#007bff',
                                cursor: 'pointer',
                                padding: '2px 4px',
                                borderRadius: '3px',
                                backgroundColor: '#f0f8ff'
                              }}>询价</span>
                              <span style={{
                                color: '#28a745',
                                cursor: 'pointer',
                                padding: '2px 4px',
                                borderRadius: '3px',
                                backgroundColor: '#f0fff0'
                              }}>图库</span>
                              <span style={{
                                color: '#ffc107',
                                cursor: 'pointer',
                                padding: '2px 4px',
                                borderRadius: '3px',
                                backgroundColor: '#fffbf0'
                              }}>车友圈</span>
                            </div>
                          </div>
                        ))}
                    </div>
                  ))}
                </div>
              ) : (
                // 空状态显示
                <div style={{
                  display: 'flex',
                  flexDirection: 'column',
                  alignItems: 'center',
                  justifyContent: 'center',
                  padding: '60px 20px',
                  backgroundColor: '#f8f9fa',
                  borderRadius: '12px',
                  border: '2px dashed #dee2e6',
                  marginTop: '20px'
                }}>
                  <div style={{
                    width: '80px',
                    height: '80px',
                    backgroundColor: '#e9ecef',
                    borderRadius: '50%',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    marginBottom: '20px',
                    fontSize: '40px'
                  }}>
                    🔍
                  </div>
                  <h4 style={{
                    fontSize: '18px',
                    color: '#495057',
                    marginBottom: '10px',
                    fontWeight: '500'
                  }}>
                    暂无符合条件的车型
                  </h4>
                  <p style={{
                    fontSize: '14px',
                    color: '#6c757d',
                    marginBottom: '20px',
                    textAlign: 'center',
                    lineHeight: '1.5'
                  }}>
                    请尝试调整筛选条件或清除筛选重新查找
                  </p>
                  <button
                    onClick={clearAllFilters}
                    style={{
                      padding: '10px 20px',
                      backgroundColor: '#ff6b35',
                      color: 'white',
                      border: 'none',
                      borderRadius: '6px',
                      cursor: 'pointer',
                      fontSize: '14px',
                      fontWeight: '500',
                      transition: 'background-color 0.2s'
                    }}
                    onMouseEnter={(e) => {
                      e.target.style.backgroundColor = '#e55a2b'
                    }}
                    onMouseLeave={(e) => {
                      e.target.style.backgroundColor = '#ff6b35'
                    }}
                  >
                    清除筛选条件
                  </button>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>

             {/* 返回顶部按钮 */}
       {showBackToTop && (
         <button
           onClick={scrollToTop}
           style={{
             position: 'fixed',
             bottom: '20px',
             right: '20px',
             backgroundColor: '#ff6b35',
             color: 'white',
             border: 'none',
             borderRadius: '50%',
             width: '50px',
             height: '50px',
             fontSize: '20px',
             cursor: 'pointer',
             boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
             transition: 'all 0.3s ease',
             zIndex: 1000,
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center'
           }}
           onMouseEnter={(e) => {
             e.target.style.backgroundColor = '#e55a2b'
             e.target.style.transform = 'translateY(-2px)'
             e.target.style.boxShadow = '0 6px 16px rgba(0, 0, 0, 0.4)'
           }}
           onMouseLeave={(e) => {
             e.target.style.backgroundColor = '#ff6b35'
             e.target.style.transform = 'translateY(0)'
             e.target.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.3)'
           }}
           title="返回顶部"
         >
           ↑
         </button>
       )}

       {/* AI接口按钮 */}
       <button
         onClick={() => navigate('/ai')}
         style={{
           position: 'fixed',
           bottom: '20px',
           right: '80px',
           backgroundColor: '#4CAF50',
           color: 'white',
           border: 'none',
           borderRadius: '50%',
           width: '50px',
           height: '50px',
           fontSize: '20px',
           cursor: 'pointer',
           boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
           transition: 'all 0.3s ease',
           zIndex: 1000,
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center'
         }}
         onMouseEnter={(e) => {
           e.target.style.backgroundColor = '#45a049'
           e.target.style.transform = 'translateY(-2px)'
           e.target.style.boxShadow = '0 6px 16px rgba(0, 0, 0, 0.4)'
         }}
         onMouseLeave={(e) => {
           e.target.style.backgroundColor = '#4CAF50'
           e.target.style.transform = 'translateY(0)'
           e.target.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.3)'
         }}
         title="AI助手"
       >
         🤖
       </button>
    </div>
  )
}
